Apppublic
AfifAlvan/WhisperAPI

sourceHugging Faceupdated 3y agoView on Hugging Face
0likes
index.html79 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="en">3 4<head>5    <meta charset="UTF-8">6    <meta http-equiv="X-UA-Compatible" content="IE=edge">7    <meta name="viewport" content="width=device-width, initial-scale=1.0">8    <title>YouText</title>9    <script src="https://cdn.tailwindcss.com"></script>10    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"11        integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="12        crossorigin="anonymous" referrerpolicy="no-referrer"></script>13</head>14 15<body>16    <div class="text-5xl font-extrabold max-w-3xl mx-auto p-12 text-center">17        <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">18            YouText19        </span>20        <p class="text-2xl font-light text-gray-600">Convert YouTube video to Text.</p>21    </div>22    <form id="form" class="max-w-3xl mx-auto space-y-4 p-8">23        <input name="url" class="rounded-sm p-2 w-full border" placeholder="Type youtube url here..." />24        <button type="submit" class="text-white bg-violet-500 rounded-sm w-full py-2">Submit</button>25    </form>26 27    <div class="max-w-3xl mx-auto space-y-4 p-8 bg-gray-200 relative">28        <h2 id="title" class="font-semibold text-2xl"></h2>29        <div class="absolute top-2 right-2 hover:cursor-pointer" id="copy-text">30            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"31                stroke="currentColor" class="w-6 h-6">32                <path stroke-linecap="round" stroke-linejoin="round"33                    d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />34            </svg>35        </div>36        <div id="result"></div>37    </div>38</body>39<script>40    $(document).ready(() => {41        $("#form").submit(function (e) {42            e.preventDefault();43 44            let formData = $(this).serialize()45            let req = $.post("/api", formData, (data) => {46                let strTemp = ""47                data.data.segments.forEach(item => {48                    strTemp += `<a class="hover:text-violet-600" href="${data.url}&t=${parseInt(item.time, 10).toFixed(0)}s">${item.text}</a>`49                    if (item.text.includes(".")) {50                        $("#result").append(`<p class="pb-2">${strTemp}</p>`);51                        strTemp = "";52                    }53                });54 55                if (strTemp !== "") {56                    $("#result").append(`<p>${strTemp}</p>`);57                }58 59                $("#title").append(data.data.title);60 61                $("#copy-text").on("click", function () {62                    let $input = $("<textarea>");63                    $("body").append($input);64                    let texts = data.data.segments.map(item => item.text).join("").trim();65                    $input.val(texts).select();66                    document.execCommand("copy");67                    $input.remove();68                });69 70            });71            req.fail((err) => {72                console.log(err);73            });74        })75    })76 77</script>78 79</html>