Hugging Face's logo

Spaces:
DenisT
/
brain-rot-tok
Sleeping

App Files Community
DenisT commited on
Commit
558f996
·
1 Parent(s): dc61d50

fonts and color picker added, hex_to_ffmpeg_color changed to be correct

Browse files
Files changed (6) hide show
  1. data/basic/audio.mp3 +0 -0
  2. data/basic/subtitles.srt +27 -159
  3. static/index.html +18 -16
  4. static/scripts.js +32 -1
  5. static/styles.css +24 -1
  6. utils/create_subtitles.py +9 -3
data/basic/audio.mp3 CHANGED
Binary files a/data/basic/audio.mp3 and b/data/basic/audio.mp3 differ
 
data/basic/subtitles.srt CHANGED
@@ -1,180 +1,48 @@
1
  1.1
2
- 00:00:00,000 --> 00:00:00,020
3
- I
4
 
5
  1.2
6
- 00:00:00,020 --> 00:00:00,100
7
- know
8
 
9
  1.3
10
- 00:00:00,100 --> 00:00:00,280
11
- what
12
-
13
- 1.4
14
- 00:00:00,280 --> 00:00:00,460
15
- you
16
-
17
- 1.5
18
- 00:00:00,460 --> 00:00:00,800
19
- want,
20
-
21
- 1.6
22
- 00:00:01,179 --> 00:00:01,480
23
- at
24
-
25
- 1.7
26
- 00:00:01,480 --> 00:00:01,620
27
- the
28
-
29
- 1.8
30
- 00:00:01,620 --> 00:00:01,840
31
- meeting,
32
-
33
- 1.9
34
- 00:00:02,240 --> 00:00:02,439
35
- if
36
-
37
- 1.10
38
- 00:00:02,439 --> 00:00:02,580
39
- you
40
-
41
- 1.11
42
- 00:00:02,580 --> 00:00:02,819
43
- don't
44
-
45
- 1.12
46
- 00:00:02,819 --> 00:00:02,980
47
- have
48
-
49
- 1.13
50
- 00:00:02,980 --> 00:00:03,100
51
- a
52
-
53
- 1.14
54
- 00:00:03,100 --> 00:00:03,299
55
- game
56
-
57
- 1.15
58
- 00:00:03,299 --> 00:00:03,620
59
- plan.
60
 
61
  2.1
62
- 00:00:03,859 --> 00:00:03,980
63
- He
64
 
65
  2.2
66
- 00:00:03,980 --> 00:00:04,139
67
- may
68
 
69
  2.3
70
- 00:00:04,139 --> 00:00:04,280
71
- have
72
 
73
  2.4
74
- 00:00:04,280 --> 00:00:04,419
75
- a
76
 
77
  2.5
78
- 00:00:04,419 --> 00:00:04,599
79
- game
80
 
81
  2.6
82
- 00:00:04,599 --> 00:00:04,879
83
- plan.
84
-
85
- 3.1
86
- 00:00:05,559 --> 00:00:05,740
87
- He
88
-
89
- 3.2
90
- 00:00:05,740 --> 00:00:05,919
91
- just
92
-
93
- 3.3
94
- 00:00:05,919 --> 00:00:06,400
95
- hasn't
96
-
97
- 3.4
98
- 00:00:06,400 --> 00:00:06,740
99
- shared
100
-
101
- 3.5
102
- 00:00:06,740 --> 00:00:06,919
103
- it
104
-
105
- 3.6
106
- 00:00:06,919 --> 00:00:07,040
107
- with
108
-
109
- 3.7
110
- 00:00:07,040 --> 00:00:07,320
111
- me.
112
-
113
- 4.1
114
- 00:00:07,860 --> 00:00:08,039
115
- But
116
-
117
- 4.2
118
- 00:00:08,039 --> 00:00:08,160
119
- I
120
-
121
- 4.3
122
- 00:00:08,160 --> 00:00:08,339
123
- tell
124
-
125
- 4.4
126
- 00:00:08,339 --> 00:00:08,500
127
- you
128
-
129
- 4.5
130
- 00:00:08,500 --> 00:00:08,619
131
- what,
132
-
133
- 4.6
134
- 00:00:08,699 --> 00:00:08,779
135
- I
136
-
137
- 4.7
138
- 00:00:08,779 --> 00:00:08,900
139
- don't
140
-
141
- 4.8
142
- 00:00:08,900 --> 00:00:08,980
143
- know
144
-
145
- 4.9
146
- 00:00:08,980 --> 00:00:09,140
147
- about
148
-
149
- 4.10
150
- 00:00:09,140 --> 00:00:09,460
151
- you,
152
-
153
- 4.11
154
- 00:00:09,839 --> 00:00:10,199
155
- but
156
-
157
- 4.12
158
- 00:00:10,199 --> 00:00:10,419
159
- I'm
160
-
161
- 4.13
162
- 00:00:10,419 --> 00:00:10,599
163
- going
164
-
165
- 4.14
166
- 00:00:10,599 --> 00:00:10,720
167
- to
168
 
169
- 4.15
170
- 00:00:10,720 --> 00:00:10,859
171
- go
172
 
173
- 4.16
174
- 00:00:10,859 --> 00:00:11,000
175
- to
176
 
177
- 4.17
178
- 00:00:11,000 --> 00:00:11,220
179
- bed.
180
 
 
1
  1.1
2
+ 00:00:00,260 --> 00:00:00,860
3
+ Alcohol
4
 
5
  1.2
6
+ 00:00:00,860 --> 00:00:01,540
7
+ with
8
 
9
  1.3
10
+ 00:00:01,540 --> 00:00:02,299
11
+ drugs
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
  2.1
14
+ 00:00:03,419 --> 00:00:03,799
15
+ Fucking
16
 
17
  2.2
18
+ 00:00:03,799 --> 00:00:04,259
19
+ woman
20
 
21
  2.3
22
+ 00:00:04,259 --> 00:00:05,059
23
+ non-stop
24
 
25
  2.4
26
+ 00:00:05,059 --> 00:00:05,299
27
+ and
28
 
29
  2.5
30
+ 00:00:05,299 --> 00:00:05,919
31
+ using
32
 
33
  2.6
34
+ 00:00:05,919 --> 00:00:06,379
35
+ them
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
 
37
+ 2.7
38
+ 00:00:06,379 --> 00:00:06,839
39
+ for
40
 
41
+ 2.8
42
+ 00:00:06,839 --> 00:00:07,099
43
+ my
44
 
45
+ 2.9
46
+ 00:00:07,099 --> 00:00:07,660
47
+ benefit
48
 
static/index.html CHANGED
@@ -5,7 +5,9 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>BrainRotTok</title>
7
  <link rel="stylesheet" href="/static/styles.css" />
 
8
  <script src="/static/scripts.js" defer></script>
 
9
  </head>
10
  <body>
11
  <h1>BrainRotTok</h1>
@@ -59,15 +61,15 @@
59
  <label for="video">Video:</label>
60
  <input type="file" id="video" name="video" />
61
  <label for="color">Color:</label>
62
- <input type="text" id="color" name="color" />
63
  <label for="size">Size:</label>
64
- <input type="number" id="size" name="size" />
65
  <label for="font">Font:</label>
66
- <input type="text" id="font" name="font" />
67
  <label for="credit">Credit:</label>
68
  <input type="text" id="credit" name="credit" />
69
  <label for="credit_size">Credit Size:</label>
70
- <input type="number" id="credit_size" name="credit_size" />
71
  <button type="submit">Submit</button>
72
  </form>
73
  <form
@@ -88,15 +90,15 @@
88
  <label for="bottom_video">Bottom Video:</label>
89
  <input type="file" id="bottom_video" name="bottom_video" />
90
  <label for="color">Color:</label>
91
- <input type="text" id="color" name="color" />
92
  <label for="size">Size:</label>
93
- <input type="number" id="size" name="size" />
94
  <label for="font">Font:</label>
95
- <input type="text" id="font" name="font" />
96
  <label for="credit">Credit:</label>
97
  <input type="text" id="credit" name="credit" />
98
  <label for="credit_size">Credit Size:</label>
99
- <input type="number" id="credit_size" name="credit_size" />
100
  <button type="submit">Submit</button>
101
  </form>
102
  <form
@@ -116,15 +118,15 @@
116
  <label for="subtitles">Subtitles:</label>
117
  <input type="text" id="subtitles" name="subtitles" />
118
  <label for="color">Color:</label>
119
- <input type="text" id="color" name="color" />
120
  <label for="size">Size:</label>
121
- <input type="number" id="size" name="size" />
122
  <label for="font">Font:</label>
123
- <input type="text" id="font" name="font" />
124
  <label for="credit">Credit:</label>
125
  <input type="text" id="credit" name="credit" />
126
  <label for="credit_size">Credit Size:</label>
127
- <input type="number" id="credit_size" name="credit_size" />
128
  <button type="submit">Submit</button>
129
  </form>
130
  <form
@@ -139,15 +141,15 @@
139
  <label for="video_url">Video Url:</label>
140
  <input type="text" id="video_url" name="video_url" />
141
  <label for="color">Color:</label>
142
- <input type="text" id="color" name="color" />
143
  <label for="size">Size:</label>
144
- <input type="number" id="size" name="size" />
145
  <label for="font">Font:</label>
146
- <input type="text" id="font" name="font" />
147
  <label for="credit">Credit:</label>
148
  <input type="text" id="credit" name="credit" />
149
  <label for="credit_size">Credit Size:</label>
150
- <input type="number" id="credit_size" name="credit_size" />
151
  <button type="submit">Submit</button>
152
  </form>
153
  <form
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>BrainRotTok</title>
7
  <link rel="stylesheet" href="/static/styles.css" />
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
9
  <script src="/static/scripts.js" defer></script>
10
+ <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js" defer></script>
11
  </head>
12
  <body>
13
  <h1>BrainRotTok</h1>
 
61
  <label for="video">Video:</label>
62
  <input type="file" id="video" name="video" />
63
  <label for="color">Color:</label>
64
+ <input type="text" id="color" name="color" data-coloris />
65
  <label for="size">Size:</label>
66
+ <input type="number" id="size" name="size" min="0"/>
67
  <label for="font">Font:</label>
68
+ <select id="font" name="font"></select>
69
  <label for="credit">Credit:</label>
70
  <input type="text" id="credit" name="credit" />
71
  <label for="credit_size">Credit Size:</label>
72
+ <input type="number" id="credit_size" name="credit_size" min="0" />
73
  <button type="submit">Submit</button>
74
  </form>
75
  <form
 
90
  <label for="bottom_video">Bottom Video:</label>
91
  <input type="file" id="bottom_video" name="bottom_video" />
92
  <label for="color">Color:</label>
93
+ <input type="text" id="color" name="color" data-coloris />
94
  <label for="size">Size:</label>
95
+ <input type="number" id="size" name="size" min="0"/>
96
  <label for="font">Font:</label>
97
+ <select id="font" name="font"></select>
98
  <label for="credit">Credit:</label>
99
  <input type="text" id="credit" name="credit" />
100
  <label for="credit_size">Credit Size:</label>
101
+ <input type="number" id="credit_size" name="credit_size" min="0" />
102
  <button type="submit">Submit</button>
103
  </form>
104
  <form
 
118
  <label for="subtitles">Subtitles:</label>
119
  <input type="text" id="subtitles" name="subtitles" />
120
  <label for="color">Color:</label>
121
+ <input type="text" id="color" name="color" data-coloris />
122
  <label for="size">Size:</label>
123
+ <input type="number" id="size" name="size" min="0"/>
124
  <label for="font">Font:</label>
125
+ <select id="font" name="font"></select>
126
  <label for="credit">Credit:</label>
127
  <input type="text" id="credit" name="credit" />
128
  <label for="credit_size">Credit Size:</label>
129
+ <input type="number" id="credit_size" name="credit_size" min="0" />
130
  <button type="submit">Submit</button>
131
  </form>
132
  <form
 
141
  <label for="video_url">Video Url:</label>
142
  <input type="text" id="video_url" name="video_url" />
143
  <label for="color">Color:</label>
144
+ <input type="text" id="color" name="color" data-coloris />
145
  <label for="size">Size:</label>
146
+ <input type="number" id="size" name="size" min="0"/>
147
  <label for="font">Font:</label>
148
+ <select id="font" name="font"></select>
149
  <label for="credit">Credit:</label>
150
  <input type="text" id="credit" name="credit" />
151
  <label for="credit_size">Credit Size:</label>
152
+ <input type="number" id="credit_size" name="credit_size" min="0" />
153
  <button type="submit">Submit</button>
154
  </form>
155
  <form
static/scripts.js CHANGED
@@ -1,12 +1,34 @@
1
  "use strict"
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  document.addEventListener("DOMContentLoaded", () => {
4
  const forms = document.querySelectorAll("form");
5
  forms.forEach((form) => {
6
  form.style.display = "none";
7
  });
8
 
9
- // add element to the DOM in the forms-container div
10
  const formsContainer = document.querySelector("#forms-container");
11
  const noChosenForm = document.createElement("span");
12
  noChosenForm.classList.add("error");
@@ -14,6 +36,15 @@ document.addEventListener("DOMContentLoaded", () => {
14
  formsContainer.appendChild(noChosenForm);
15
  });
16
 
 
 
 
 
 
 
 
 
 
17
  document.querySelectorAll(".show-form").forEach((button) => {
18
  button.addEventListener("click", (event) => {
19
  showForm(event.target.dataset.formId);
 
1
  "use strict"
2
 
3
+ const common_fonts = [
4
+ "Arial",
5
+ "Times New Roman",
6
+ "Courier New",
7
+ "Verdana",
8
+ "Georgia",
9
+ "Palatino",
10
+ "Bookman Old Style",
11
+ "Tahoma",
12
+ "Century Gothic",
13
+ "Lucida Console",
14
+ "Monaco",
15
+ "Bradley Hand",
16
+ "Calibri",
17
+ "Cambria",
18
+ "Candara",
19
+ "Consolas",
20
+ "Constantia",
21
+ "Corbel",
22
+ "Franklin Gothic Medium",
23
+ "Gabriola"
24
+ ];
25
+
26
  document.addEventListener("DOMContentLoaded", () => {
27
  const forms = document.querySelectorAll("form");
28
  forms.forEach((form) => {
29
  form.style.display = "none";
30
  });
31
 
 
32
  const formsContainer = document.querySelector("#forms-container");
33
  const noChosenForm = document.createElement("span");
34
  noChosenForm.classList.add("error");
 
36
  formsContainer.appendChild(noChosenForm);
37
  });
38
 
39
+ const fontsSelect = document.querySelectorAll("#font").forEach((fontSelect) => {
40
+ common_fonts.forEach(font => {
41
+ const option = document.createElement('option');
42
+ option.value = font;
43
+ option.text = font;
44
+ fontSelect.add(option);
45
+ });
46
+ });
47
+
48
  document.querySelectorAll(".show-form").forEach((button) => {
49
  button.addEventListener("click", (event) => {
50
  showForm(event.target.dataset.formId);
static/styles.css CHANGED
@@ -153,4 +153,27 @@ span.error {
153
  .form-buttons {
154
  display: flex;
155
  justify-content: center;
156
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
153
  .form-buttons {
154
  display: flex;
155
  justify-content: center;
156
+ }
157
+
158
+ select {
159
+ width: 100%;
160
+ padding: 10px;
161
+ border: 1px solid #ccc;
162
+ border-radius: 3px;
163
+ box-sizing: border-box;
164
+ margin-bottom: 15px;
165
+ background-color: #fff;
166
+ color: #555;
167
+ font-size: 16px;
168
+ }
169
+
170
+ option {
171
+ background-color: #fff;
172
+ color: #555;
173
+ padding: 5px 10px;
174
+ }
175
+
176
+ option:checked {
177
+ background-color: #007bff;
178
+ color: #fff;
179
+ }
utils/create_subtitles.py CHANGED
@@ -20,6 +20,12 @@ def hex_to_ffmpeg_color(hex_color):
20
  # Remove '#' if present
21
  hex_color = hex_color.lstrip('#')
22
 
23
- # Convert hex to FFmpeg color format
24
- ffmpeg_color = int(hex_color, 16)
25
- return f'0x{ffmpeg_color:06x}'
 
 
 
 
 
 
 
20
  # Remove '#' if present
21
  hex_color = hex_color.lstrip('#')
22
 
23
+ # Convert hex to RGB values
24
+ r = int(hex_color[0:2], 16)
25
+ g = int(hex_color[2:4], 16)
26
+ b = int(hex_color[4:6], 16)
27
+
28
+ # Construct FFmpeg color format
29
+ ffmpeg_color = (b << 16) + (g << 8) + r
30
+
31
+ return f'0x{ffmpeg_color:08x}'