Spaces:

burask
/

transcript

Starting

App Files Files Community

burask commited on 4 days ago

Commit

fa2c805

verified ·

1 Parent(s): 8cc5a2f

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +160 -119

templates/index.html CHANGED Viewed

@@ -1,119 +1,160 @@
-<!DOCTYPE html>
-<html lang="tr">
-<head>
-    <meta charset="UTF-8">
-    <title>🎙️Transkript</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-            font-family: "cursive";
-            overflow: hidden;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-        #particles-js {
-            position: fixed;
-            width: 100%;
-            height: 100%;
-            background-color: #0d1b2a;
-            z-index: -1;
-        }
-      .container {
-    max-width: 1000px;
-    width: 95%;
-    background: rgba(176, 26, 26, 0.459);
-    padding: 50px;
-    border-radius: 20px;
-    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
-    z-index: 1;
-    color: #fff;
-}
-.output-box {
-    margin-top: 15px;
-    background: #e9ecef;
-    padding: 10px;
-    border-radius: 10px;
-    white-space: pre-wrap;
-    max-height: 300px;
-    overflow-y: auto;
-    color: #000;
-}
-.output-box h2,
-.output-box h3,
-.output-box p {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-    </style>
-</head>
-<body>
-    <div id="particles-js"></div>
-    <div class="container">
-        <h2 class="text-center mb-4">🎙️ Ses Dosyasını Metne Dönüştür</h2>
-        <form method="POST" enctype="multipart/form-data">
-            <div class="mb-3">
-                <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
-                <input class="form-control" type="file" name="file" id="file" required>
-            </div>
-            <div class="d-grid">
-                <button type="submit" class="btn btn-primary btn-lg">Yükle ve Dönüştür</button>
-            </div>
-        </form>
-        {% if metin %}
-    <div class="output-box mt-1">
-        <h5>🎧 Dönüştürülen Metin:</h5>
-        <p>{{ metin }}</p>
-    </div>
-        {% if ozet %}
-        <div class="output-box mt-4">
-            <h5>📝 Metnin Özeti:</h5>
-            <p>{{ ozet }}</p>
-        </div>
-        {% endif %}
-          {% endif %}
-    </div>
-    <p style="position: fixed; bottom: 20px; left: 20px; color:#ffffff;">Designer by: Burak Tuğrul Aşık & Tarık Kahraman</p>
-    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
-    <script>
-        particlesJS('particles-js', {
-            "particles": {
-                "number": { "value": 90, "density": { "enable": true, "value_area": 800 } },
-                "color": { "value": "#ffffff" },
-                "shape": { "type": "star", "stroke": { "width": 0, "color": "#ffffff" }, "polygon": { "nb_sides": 5 } },
-                "opacity": { "value": 0.5, "random": false },
-                "size": { "value": 3, "random": false },
-                "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 },
-                "move": { "enable": true, "speed": 1, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false }
-            },
-            "interactivity": {
-                "detect_on": "canvas",
-                "events": {
-                    "onhover": { "enable": true, "mode": "repulse" },
-                    "onclick": { "enable": true, "mode": "push" },
-                    "resize": true
-                },
-                "modes": {
-                    "repulse": { "distance": 100, "duration": 0.4 },
-                    "push": { "particles_nb": 4 }
-                }
-            },
-            "retina_detect": true
-        });
-    </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <title>🎙️Transkript</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            font-family: "cursive";
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        #particles-js {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background-color: #0d1b2a;
+            z-index: -1;
+        }
+        .container {
+            max-width: 1000px;
+            width: 95%;
+            background: rgba(176, 26, 26, 0.459);
+            padding: 50px;
+            border-radius: 20px;
+            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+            z-index: 1;
+            color: #fff;
+        }
+        .output-box {
+            margin-top: 15px;
+            background: #e9ecef;
+            padding: 10px;
+            border-radius: 10px;
+            white-space: pre-wrap;
+            max-height: 300px;
+            overflow-y: auto;
+            color: #000;
+        }
+        .progress-wrapper {
+            display: none;
+            margin-top: 15px;
+        }
+        .progress-bar {
+            background-color: green;
+            text-align: center;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div id="particles-js"></div>
+    <div class="container">
+        <h2 class="text-center mb-4">🎙️ Ses Dosyasını Metne Dönüştür</h2>
+        <div class="mb-3">
+            <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
+            <input class="form-control" type="file" name="file" id="file" required>
+        </div>
+        <div class="progress-wrapper">
+            <div id="progress-bar" class="progress-bar" style="width:0%">0%</div>
+        </div>
+        <div class="d-grid">
+            <button id="uploadBtn" class="btn btn-primary btn-lg">Yükle ve Dönüştür</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <p style="position: fixed; bottom: 20px; left: 20px; color:#ffffff;">Designer by: Burak Tuğrul Aşık & Tarık Kahraman</p>
+    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script>
+        particlesJS('particles-js', {
+            "particles": {
+                "number": { "value": 90, "density": { "enable": true, "value_area": 800 } },
+                "color": { "value": "#ffffff" },
+                "shape": { "type": "star", "stroke": { "width": 0, "color": "#ffffff" }, "polygon": { "nb_sides": 5 } },
+                "opacity": { "value": 0.5, "random": false },
+                "size": { "value": 3, "random": false },
+                "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 },
+                "move": { "enable": true, "speed": 1, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false }
+            },
+            "interactivity": {
+                "detect_on": "canvas",
+                "events": {
+                    "onhover": { "enable": true, "mode": "repulse" },
+                    "onclick": { "enable": true, "mode": "push" },
+                    "resize": true
+                },
+                "modes": {
+                    "repulse": { "distance": 100, "duration": 0.4 },
+                    "push": { "particles_nb": 4 }
+                }
+            },
+            "retina_detect": true
+        });
+        $("#uploadBtn").click(function(e) {
+            e.preventDefault();
+            var fileInput = $("#file")[0].files[0];
+            if (!fileInput) {
+                alert("Lütfen bir dosya seçin!");
+                return;
+            }
+            var formData = new FormData();
+            formData.append("file", fileInput);
+            $(".progress-wrapper").show();
+            $("#progress-bar").css("width", "0%").text("0%");
+            $("#result").html("");
+            $.ajax({
+                xhr: function() {
+                    var xhr = new window.XMLHttpRequest();
+                    xhr.upload.addEventListener("progress", function(e) {
+                        if (e.lengthComputable) {
+                            var percent = Math.round((e.loaded / e.total) * 100);
+                            $("#progress-bar").css("width", percent + "%").text(percent + "%");
+                        }
+                    });
+                    return xhr;
+                },
+                type: "POST",
+                url: "/",
+                data: formData,
+                processData: false,
+                contentType: false,
+                success: function(response) {
+                    if (response.error) {
+                        $("#result").html(`<p style="color:red;">${response.error}</p>`);
+                        return;
+                    }
+                    $("#progress-bar").css("width", "100%").text("100%");
+                    $("#result").html(
+                        `<div class="output-box">
+                            <h5>🎧 Dönüştürülen Metin:</h5>
+                            <p>${response.metin}</p>
+                            <h5>📝 Metnin Özeti:</h5>
+                            <p>${response.ozet}</p>
+                        </div>`
+                    );
+                },
+                error: function() {
+                    alert("Bir hata oluştu.");
+                }
+            });
+        });
+    </script>
+</body>
+</html>