Spaces:

burask
/

transcript

Sleeping

App Files Files Community

burask commited on Aug 13, 2025

Commit

fc9a410

verified ·

1 Parent(s): d77c502

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +52 -93

templates/index.html CHANGED Viewed

@@ -15,6 +15,7 @@
             justify-content: center;
             align-items: center;
         }
         #particles-js {
             position: fixed;
             width: 100%;
@@ -22,35 +23,37 @@
             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>
@@ -58,27 +61,34 @@
     <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": {
@@ -104,57 +114,6 @@
             },
             "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>

             justify-content: center;
             align-items: center;
         }
         #particles-js {
             position: fixed;
             width: 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 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": {
             },
             "retina_detect": true
         });
     </script>
 </body>
 </html>