File size: 7,101 Bytes
7e9fae4 6aa994f a40cbb8 6aa994f da50bf2 6aa994f da50bf2 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f 6c7ce7e 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f a40cbb8 6aa994f 6c7ce7e 6aa994f a40cbb8 da50bf2 6aa994f 6c7ce7e a40cbb8 6aa994f da50bf2 6aa994f da50bf2 6c7ce7e 6aa994f da50bf2 6aa994f a40cbb8 6aa994f da50bf2 6aa994f 6c7ce7e da50bf2 6c7ce7e 6aa994f 6c7ce7e 6aa994f 6c7ce7e 6aa994f 6c7ce7e 6aa994f a40cbb8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
<!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;
}
#search {
background-color: #4c72af;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-left: 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>
<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>");
}
});
});
});
});
}
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> |