Spaces:

Reggie
/

utilities

Running

App Files Files Community

utilities / templates /index.html

Reggie

add item

c476445 over 2 years ago

Raw

History Blame Contribute Delete

8.46 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Utilities</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
	body {
	font-family: Arial, sans-serif;
	}

	h2 {
	text-align: center;
	}

	#search-container {
	display: flex;
	justify-content: center;
	align-items: center;
	}

	#query {
	width: 70%;
	padding: 10px;
	}

	#title, #link {
	width: 70%;
	padding: 10px;
	margin-top: 10px;
	}

	#search {
	background-color: #4c72af;
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	margin-left: 10px;
	}

	#add {
	background-color: #4c72af;
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	margin-top: 10px;
	}

	#results {
	margin: 20px;
	}

	.result {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	}

	.delete {
	background-color: #ff0000;
	color: white;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	margin: 0 10px;
	}

	#drag-drop-container {
	border: 2px dashed #4c72af;
	padding: 20px;
	text-align: center;
	cursor: pointer;
	}

	.deleted-text {
	color: red;
	}
	</style>
	</head>
	<body>
	<h2>Utilities</h2>
	<div id="search-container">
	<input type="text" id="query" placeholder="Search...">
	<button id="search">Search</button>
	</div>
	<div id="results"></div>

	<!-- Drag and drop area -->
	<div id="drag-drop-container">
	Drag & Drop Audio File (mp3, wav, ogg, m4v) Here
	</div>

	<div>
	<label for="title">Title:</label>
	<input type="text" id="title" placeholder="TIL something or the other">
	</div>
	<div>
	<label for="link">Link:</label>
	<input type="text" id="link" placeholder="https://somelink.com">
	</div>
	<button id="add">ADD ITEM</button>
	<div id="add-results"></div>

	<script>
	$(document).ready(function () {
	var collection = "jks";
	function performSearch() {
	var query = $("#query").val();
	// if query starts with til: or tilc:, set collection to tils, else set to jks
	if (query.startsWith("til:")) {
	collection = "tils";
	// query = query.substring(4);
	} else if (query.startsWith("tilc:")) {
	collection = "tils";
	// query = query.substring(5);
	} else {
	collection = "jks";
	}

	$.post("/search", { query: query, collection:collection }, function (data) {
	// Handle search results
	var results = $("#results");
	results.empty();

	data.forEach(function (result) {
	// if collection is tils, set resultElement to the result.text, hyperlinked by result.url after prepending with https://. The date should have an underscore after the first 8 characters
	// else, set resultElement to the result.text

	if (collection == "tils") {
	var resultElement = $("<div class='result'>" + "<p>" + "<a href='https://" + result.url + "' target='_blank'>" + result.text + "</a>" + "</p>" + "<small>" + result.date + "</small>" + "<button class='delete' data-id='" + result.id + "'>Delete</button>" + "</div>");
	} else {
	var resultElement = $("<div class='result'>" + "<p>" + result.text + "</p>" + "<small>Date: " + result.date + "</small>" + "<button class='delete' data-id='" + result.id + "'>Delete</button>" + "</div>");
	}

	results.append(resultElement);

	resultElement.find(".delete").on("click", function () {
	var id = $(this).data("id");
	var resultButton = $(this);

	$.post("/delete_joke", { id: id, collection:collection }, function (data) {
	// Handle the delete response if needed

	if (data.deleted) {
	// Replace the button with "DELETED!" text
	resultButton.replaceWith("<p class='deleted-text'>DELETED!</p>");
	}
	});
	});
	});
	});
	}

	$('#add').click(function() {
	$('#add-results').append("<h3>Adding item. Hold on!</h3>");
	var title = $('#title').val();
	var url = $('#link').val();

	$.post('/add_item', {
	title: title,
	url: url
	}, function(data) {
	if(data.success) {
	$('#title').val('');
	$('#link').val('');
	$('#add-results').empty();
	$('#add-results').append("<h3>Successfully added item to " + data.index + "</h3>");
	}
	});

	});

	function displayTranscriptionResult(transcription) {
	// Display the transcription result
	var results = $("#results");
	results.empty();
	results.append("<div class='result'>" + "<p>" + transcription + "</p>" + "</div>");
	// Hide the "Transcribing..." message
	$("#drag-drop-container").text("Drag & Drop Audio File (mp3, wav, ogg, m4a) Here");
	$("#drag-drop-container").css("border-color", "#4c72af");
	}

	$("#search").on("click", function () {
	performSearch();
	$("#drag-drop-container").css("display", "none"); // Hide drag & drop area
	});

	$("#query").on("keydown", function (event) {
	if (event.key === "Enter") {
	event.preventDefault();
	performSearch();
	$("#drag-drop-container").css("display", "none"); // Hide drag & drop area
	}
	});

	// Drag and drop functionality
	$("#drag-drop-container").on("dragover", function (e) {
	e.preventDefault();
	$(this).css("border", "2px dashed #ff0000");
	});

	$("#drag-drop-container").on("dragleave", function (e) {
	e.preventDefault();
	$(this).css("border", "2px dashed #4c72af");
	});

	$("#drag-drop-container").on("drop", function (e) {
	e.preventDefault();
	$(this).css("border", "2px dashed #4c72af");

	var files = e.originalEvent.dataTransfer.files;
	if (files.length > 0) {
	// Display "Transcribing..." message
	$("#drag-drop-container").text("Transcribing the audio file...");
	$("#drag-drop-container").css("border-color", "#ccc");
	// Assume there's only one file for simplicity
	var file = files[0];

	var formData = new FormData();
	formData.append("audio", file);

	$.ajax({
	url: "/whisper_transcribe",
	type: "POST",
	data: formData,
	processData: false,
	contentType: false,
	success: function (data) {
	// Handle transcription result
	displayTranscriptionResult(data.transcription);
	},
	});
	}
	});
	});
	</script>
	</body>
	</html>