Spaces:

DenisT
/

brain-rot-tok

Sleeping

App Files Files Community

DenisT commited on Apr 1, 2024

Commit

629e7a5

1 Parent(s): 558f996

modified video_editor, html/css/js

Browse files

Files changed (4) hide show

endpoints/video_editor_cut.py +30 -45
static/index.html +31 -29
static/scripts.js +32 -49
static/styles.css +28 -0

endpoints/video_editor_cut.py CHANGED Viewed

@@ -1,70 +1,55 @@
-import json
 import shutil
 import subprocess
-from typing import List
 from fastapi import UploadFile, File, Form
 from fastapi.responses import FileResponse
 from fastapi import APIRouter, BackgroundTasks
 import os
 router = APIRouter()
 @router.post("/cut")
 async def cut_videos(
-	videos: List[UploadFile] = File(...),
-	timestamps: str = Form(...),
-	background_tasks: BackgroundTasks = BackgroundTasks()
 ):
-	timestamps_dict = json.loads(timestamps)
 	temp_dir = "./data/video_editor/videos"
 	if not os.path.exists(temp_dir):
 		os.makedirs(temp_dir)
-	save_and_cut(videos, temp_dir, timestamps_dict)
-	clean_temp_dir = remove_temp_files(temp_dir)
-	zip_filename = shutil.make_archive(f"{clean_temp_dir}", 'zip', "./data/video_editor/")
-	background_tasks.add_task(remove_zip_folder, zip_filename)
-	return FileResponse(zip_filename)
-def save_and_cut(videos, temp_dir, timestamps_dict):
-	for index, video in enumerate(videos):
-		temp_video_path = f"{temp_dir}/{video.filename}-{index}.mp4"
-		with open(temp_video_path, "wb") as f:
-			shutil.copyfileobj(video.file, f)
-		cut_start = timestamps_dict[str(index)]["start"]
-		cut_end = timestamps_dict[str(index)]["end"]
-		# Remove the "-index" from the filename by removing everything after the last "-"
-		filename_without_extension = os.path.splitext(temp_video_path)[0]
-		filename_without_index = filename_without_extension.rsplit("-", 1)[0]
-		output_video_path = f"{filename_without_index}_cut.mp4"
-		subprocess.run([
-			"ffmpeg",
-			"-i", temp_video_path,
-			"-ss", cut_start,
-			"-t", cut_end,
-			"-y", output_video_path
-		])
-		# Remove the temporary video file
-		os.remove(temp_video_path)
-def remove_temp_files(temp_dir):
-	for filename in os.listdir(temp_dir):
-		if "cut" not in filename:
-			os.remove(f"{temp_dir}/{filename}")
-		if "cut" in filename:
-			os.rename(f"{temp_dir}/{filename}", f"{temp_dir}/{filename.replace('_cut.mp4', '')}")
-	return temp_dir
-def remove_zip_folder(zip_filename):
-	if os.path.exists(zip_filename):
-		shutil.rmtree(zip_filename[:-4])
-		os.remove(zip_filename)

 import shutil
 import subprocess
 from fastapi import UploadFile, File, Form
 from fastapi.responses import FileResponse
 from fastapi import APIRouter, BackgroundTasks
 import os
+from endpoints.utils import get_file_name
+from endpoints.utils import remove_content_from_dir
 router = APIRouter()
 @router.post("/cut")
 async def cut_videos(
+		video: UploadFile = File(...),
+		start_time: str = Form(...),
+		end_time: str = Form(...),
+		background_tasks: BackgroundTasks = BackgroundTasks()
 ):
 	temp_dir = "./data/video_editor/videos"
 	if not os.path.exists(temp_dir):
 		os.makedirs(temp_dir)
+	output_video_path = save_and_cut(video, temp_dir, start_time, end_time)
+	# send video back
+	video_name = get_file_name("video_cut")
+	# background_tasks.add_task(remove_content_from_dir, temp_dir)
+	return FileResponse(output_video_path, media_type="video/mp4", filename=video_name)
+def save_and_cut(video: UploadFile, temp_dir, start_time, end_time):
+	# Save uploaded video to temporary directory
+	video_path = os.path.join(temp_dir, video.filename)
+	with open(video_path, 'wb') as buffer:
+		shutil.copyfileobj(video.file, buffer)
+	# Output video path
+	output_video_path = os.path.join(temp_dir, "output.mp4")
+	# Command to cut video using ffmpeg
+	ffmpeg_command = [
+		"ffmpeg",
+		"-i", video_path,
+		"-ss", start_time,
+		"-to", end_time,
+		"-y", output_video_path
+	]
+	# Execute ffmpeg command
+	subprocess.run(ffmpeg_command, check=True)
+	return output_video_path

static/index.html CHANGED Viewed

@@ -11,6 +11,9 @@
 	</head>
 	<body>
 		<h1>BrainRotTok</h1>
 		<div class="form-buttons">
 			<ul>
 				<li>
@@ -32,7 +35,6 @@
 					<button
 						class="show-form"
 						data-form-id="video-cutter-form"
-						disabled
 					>
 						VIDEO CUTTER
 					</button>
@@ -51,7 +53,7 @@
 		<div id="forms-container">
 			<form
 				id="basic-form"
-				class="hidden form-container"
 				action="/generate-subtitles/basic"
 				method="post"
 				enctype="multipart/form-data"
@@ -59,17 +61,17 @@
 				<h2 class="form-title">BASIC</h2>
 				<p>Generate subtitles for a video.</p>
 				<label for="video">Video:</label>
-				<input type="file" id="video" name="video" />
 				<label for="color">Color:</label>
-				<input type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
-				<input type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
-				<input type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
-				<input type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
@@ -86,19 +88,19 @@
 					have its subtitles generated.
 				</p>
 				<label for="top_video">Top Video:</label>
-				<input type="file" id="top_video" name="top_video" />
 				<label for="bottom_video">Bottom Video:</label>
-				<input type="file" id="bottom_video" name="bottom_video" />
 				<label for="color">Color:</label>
-				<input type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
-				<input type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
-				<input type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
-				<input type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
@@ -114,19 +116,19 @@
 					an AI voice with subtitles.
 				</p>
 				<label for="video">Video:</label>
-				<input type="file" id="video" name="video" />
 				<label for="subtitles">Subtitles:</label>
-				<input type="text" id="subtitles" name="subtitles" />
 				<label for="color">Color:</label>
-				<input type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
-				<input type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
-				<input type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
-				<input type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
@@ -139,17 +141,17 @@
 				<h2 class="form-title">RUMBLE</h2>
 				<p>Generates subtitles for Rumble videos.</p>
 				<label for="video_url">Video Url:</label>
-				<input type="text" id="video_url" name="video_url" />
 				<label for="color">Color:</label>
-				<input type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
-				<input type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
-				<input type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
-				<input type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
@@ -162,11 +164,11 @@
 				<h2 class="form-title">VIDEO CUTTER</h2>
 				<p>Cut a video from a start time to an end time.</p>
 				<label for="video">Video:</label>
-				<input type="file" id="video" name="video" />
-				<label for="start_time">Start Time:</label>
-				<input type="text" id="start_time" name="start_time" />
-				<label for="end_time">End Time:</label>
-				<input type="text" id="end_time" name="end_time" />
 				<button type="submit">Submit</button>
 			</form>
 		</div>

 	</head>
 	<body>
 		<h1>BrainRotTok</h1>
+		<div class="reference">
+			<a href="https://github.com/Detopall/BrainRotTok" target="_blank">GitHub</a>
+		</div>
 		<div class="form-buttons">
 			<ul>
 				<li>
 					<button
 						class="show-form"
 						data-form-id="video-cutter-form"
 					>
 						VIDEO CUTTER
 					</button>
 		<div id="forms-container">
 			<form
 				id="basic-form"
+				class="form-container"
 				action="/generate-subtitles/basic"
 				method="post"
 				enctype="multipart/form-data"
 				<h2 class="form-title">BASIC</h2>
 				<p>Generate subtitles for a video.</p>
 				<label for="video">Video:</label>
+				<input required type="file" id="video" name="video" />
 				<label for="color">Color:</label>
+				<input required type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
+				<input required type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
+				<input required type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
+				<input required type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
 					have its subtitles generated.
 				</p>
 				<label for="top_video">Top Video:</label>
+				<input required type="file" id="top_video" name="top_video" />
 				<label for="bottom_video">Bottom Video:</label>
+				<input required type="file" id="bottom_video" name="bottom_video" />
 				<label for="color">Color:</label>
+				<input required type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
+				<input required type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
+				<input required type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
+				<input required type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
 					an AI voice with subtitles.
 				</p>
 				<label for="video">Video:</label>
+				<input required type="file" id="video" name="video" />
 				<label for="subtitles">Subtitles:</label>
+				<input required type="text" id="subtitles" name="subtitles" />
 				<label for="color">Color:</label>
+				<input required type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
+				<input required type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
+				<input required type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
+				<input required type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
 				<h2 class="form-title">RUMBLE</h2>
 				<p>Generates subtitles for Rumble videos.</p>
 				<label for="video_url">Video Url:</label>
+				<input required type="text" id="video_url" name="video_url" />
 				<label for="color">Color:</label>
+				<input required type="text" id="color" name="color" data-coloris />
 				<label for="size">Size:</label>
+				<input required type="number" id="size" name="size" min="0"/>
 				<label for="font">Font:</label>
 				<select id="font" name="font"></select>
 				<label for="credit">Credit:</label>
+				<input required type="text" id="credit" name="credit" />
 				<label for="credit_size">Credit Size:</label>
+				<input required type="number" id="credit_size" name="credit_size" min="0" />
 				<button type="submit">Submit</button>
 			</form>
 			<form
 				<h2 class="form-title">VIDEO CUTTER</h2>
 				<p>Cut a video from a start time to an end time.</p>
 				<label for="video">Video:</label>
+				<input required type="file" id="video" name="video" />
+				<label for="start_time">Start Time (HH:MM:SS):</label>
+				<input required type="text" id="start_time" name="start_time" placeholder="00:00:00"/>
+				<label for="end_time">End Time (HH:MM:SS):</label>
+				<input required type="text" id="end_time" name="end_time" placeholder="00:00:00"/>
 				<button type="submit">Submit</button>
 			</form>
 		</div>

static/scripts.js CHANGED Viewed

@@ -1,65 +1,48 @@
-"use strict"
 const common_fonts = [
-	"Arial",
-	"Times New Roman",
-	"Courier New",
-	"Verdana",
-	"Georgia",
-	"Palatino",
-	"Bookman Old Style",
-	"Tahoma",
-	"Century Gothic",
-	"Lucida Console",
-	"Monaco",
-	"Bradley Hand",
-	"Calibri",
-	"Cambria",
-	"Candara",
-	"Consolas",
-	"Constantia",
-	"Corbel",
-	"Franklin Gothic Medium",
-	"Gabriola"
 ];
 document.addEventListener("DOMContentLoaded", () => {
-	const forms = document.querySelectorAll("form");
-	forms.forEach((form) => {
-		form.style.display = "none";
 	});
-	const formsContainer = document.querySelector("#forms-container");
-	const noChosenForm = document.createElement("span");
-	noChosenForm.classList.add("error");
-	noChosenForm.textContent = "No form chosen";
-	formsContainer.appendChild(noChosenForm);
-});
-const fontsSelect = document.querySelectorAll("#font").forEach((fontSelect) => {
-	common_fonts.forEach(font => {
-		const option = document.createElement('option');
-		option.value = font;
-		option.text = font;
-		fontSelect.add(option);
 	});
-});
-document.querySelectorAll(".show-form").forEach((button) => {
-	button.addEventListener("click", (event) => {
-		showForm(event.target.dataset.formId);
 	});
 });
 function showForm(formId) {
-	const forms = document.querySelectorAll("#forms-container form");
-	forms.forEach((form) => {
-		if (form.id === formId) {
-			form.style.display = "block";
-			const noChosenForm = document.querySelector(".error");
-			noChosenForm.style.display = "none";
-		} else {
-			form.style.display = "none";
-		}
 	});
 }

+"use strict";
 const common_fonts = [
+	"Arial", "Times New Roman", "Courier New", "Verdana", "Georgia", "Palatino",
+	"Bookman Old Style", "Tahoma", "Century Gothic", "Lucida Console", "Monaco",
+	"Bradley Hand", "Calibri", "Cambria", "Candara", "Consolas", "Constantia",
+	"Corbel", "Franklin Gothic Medium", "Gabriola"
 ];
 document.addEventListener("DOMContentLoaded", () => {
+	const startTimeInput = document.querySelector("#start_time");
+	const endTimeInput = document.querySelector("#end_time");
+	[startTimeInput, endTimeInput].forEach(input => {
+		input.addEventListener("input", () => validateTimeFormat(input));
 	});
+	document.querySelectorAll(".show-form").forEach(option => {
+		option.addEventListener("click", () => {
+			document.querySelectorAll(".show-form").forEach(opt => opt.classList.remove("active-option"));
+			option.classList.add("active-option");
+		});
+	});
+	document.querySelectorAll("#font").forEach(fontSelect => {
+		common_fonts.forEach(font => {
+			const option = new Option(font, font);
+			fontSelect.add(option);
+		});
 	});
+	document.querySelectorAll(".show-form").forEach(button => {
+		button.addEventListener("click", event => showForm(event.target.dataset.formId));
 	});
 });
 function showForm(formId) {
+	document.querySelectorAll("#forms-container form").forEach(form => {
+		form.style.display = form.id === formId ? "block" : "none";
 	});
 }
+function validateTimeFormat(input) {
+	const regex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
+	const isValid = regex.test(input.value);
+	input.setCustomValidity(isValid ? "" : "Invalid time format. Please use HH:MM:SS");
+	input.style.borderColor = isValid ? "#ccc" : "red";
+}

static/styles.css CHANGED Viewed

@@ -177,3 +177,31 @@ option:checked {
 	background-color: #007bff;
 	color: #fff;
 }

 	background-color: #007bff;
 	color: #fff;
 }
+.active-option {
+	background-color: #1f5792;
+	color: #fff;
+}
+.clr-field {
+	margin-bottom: 15px;
+}
+.reference {
+	margin-top: 20px;
+	text-align: center;
+}
+.reference a {
+	color: #007bff;
+	font-weight: bold;
+	transition: color 0.3s ease;
+}
+.reference a:hover {
+	color: #0056b3;
+}
+.hidden {
+	display: none;
+}