Hugging Face's logo

Spaces:
burask
/
transcript
Running

App Files Community
burask commited on
Commit
fc9a410
·
verified ·
1 Parent(s): d77c502

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +52 -93
templates/index.html CHANGED
@@ -15,6 +15,7 @@
15
  justify-content: center;
16
  align-items: center;
17
  }
 
18
  #particles-js {
19
  position: fixed;
20
  width: 100%;
@@ -22,35 +23,37 @@
22
  background-color: #0d1b2a;
23
  z-index: -1;
24
  }
25
- .container {
26
- max-width: 1000px;
27
- width: 95%;
28
- background: rgba(176, 26, 26, 0.459);
29
- padding: 50px;
30
- border-radius: 20px;
31
- box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
32
- z-index: 1;
33
- color: #fff;
34
- }
35
- .output-box {
36
- margin-top: 15px;
37
- background: #e9ecef;
38
- padding: 10px;
39
- border-radius: 10px;
40
- white-space: pre-wrap;
41
- max-height: 300px;
42
- overflow-y: auto;
43
- color: #000;
44
- }
45
- .progress-wrapper {
46
- display: none;
47
- margin-top: 15px;
48
- }
49
- .progress-bar {
50
- background-color: green;
51
- text-align: center;
52
- color: white;
53
- }
 
 
54
  </style>
55
  </head>
56
  <body>
@@ -58,27 +61,34 @@
58
 
59
  <div class="container">
60
  <h2 class="text-center mb-4">🎙️ Ses Dosyasını Metne Dönüştür</h2>
 
 
 
 
 
 
 
 
 
61
 
62
- <div class="mb-3">
63
- <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
64
- <input class="form-control" type="file" name="file" id="file" required>
65
- </div>
66
-
67
- <div class="progress-wrapper">
68
- <div id="progress-bar" class="progress-bar" style="width:0%">0%</div>
69
- </div>
70
-
71
- <div class="d-grid">
72
- <button id="uploadBtn" class="btn btn-primary btn-lg">Yükle ve Dönüştür</button>
73
  </div>
 
 
74
 
75
- <div id="result"></div>
76
  </div>
77
 
78
  <p style="position: fixed; bottom: 20px; left: 20px; color:#ffffff;">Designer by: Burak Tuğrul Aşık & Tarık Kahraman</p>
79
 
80
  <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
81
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
82
  <script>
83
  particlesJS('particles-js', {
84
  "particles": {
@@ -104,57 +114,6 @@
104
  },
105
  "retina_detect": true
106
  });
107
-
108
- $("#uploadBtn").click(function(e) {
109
- e.preventDefault();
110
- var fileInput = $("#file")[0].files[0];
111
- if (!fileInput) {
112
- alert("Lütfen bir dosya seçin!");
113
- return;
114
- }
115
- var formData = new FormData();
116
- formData.append("file", fileInput);
117
-
118
- $(".progress-wrapper").show();
119
- $("#progress-bar").css("width", "0%").text("0%");
120
- $("#result").html("");
121
-
122
- $.ajax({
123
- xhr: function() {
124
- var xhr = new window.XMLHttpRequest();
125
- xhr.upload.addEventListener("progress", function(e) {
126
- if (e.lengthComputable) {
127
- var percent = Math.round((e.loaded / e.total) * 100);
128
- $("#progress-bar").css("width", percent + "%").text(percent + "%");
129
- }
130
- });
131
- return xhr;
132
- },
133
- type: "POST",
134
- url: "/",
135
- data: formData,
136
- processData: false,
137
- contentType: false,
138
- success: function(response) {
139
- if (response.error) {
140
- $("#result").html(`<p style="color:red;">${response.error}</p>`);
141
- return;
142
- }
143
- $("#progress-bar").css("width", "100%").text("100%");
144
- $("#result").html(
145
- `<div class="output-box">
146
- <h5>🎧 Dönüştürülen Metin:</h5>
147
- <p>${response.metin}</p>
148
- <h5>📝 Metnin Özeti:</h5>
149
- <p>${response.ozet}</p>
150
- </div>`
151
- );
152
- },
153
- error: function() {
154
- alert("Bir hata oluştu.");
155
- }
156
- });
157
- });
158
  </script>
159
  </body>
160
  </html>
 
15
  justify-content: center;
16
  align-items: center;
17
  }
18
+
19
  #particles-js {
20
  position: fixed;
21
  width: 100%;
 
23
  background-color: #0d1b2a;
24
  z-index: -1;
25
  }
26
+
27
+ .container {
28
+ max-width: 1000px;
29
+ width: 95%;
30
+ background: rgba(176, 26, 26, 0.459);
31
+ padding: 50px;
32
+ border-radius: 20px;
33
+ box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
34
+ z-index: 1;
35
+ color: #fff;
36
+ }
37
+
38
+ .output-box {
39
+ margin-top: 15px;
40
+ background: #e9ecef;
41
+ padding: 10px;
42
+ border-radius: 10px;
43
+ white-space: pre-wrap;
44
+ max-height: 300px;
45
+ overflow-y: auto;
46
+ color: #000;
47
+ }
48
+
49
+ .output-box h2,
50
+ .output-box h3,
51
+ .output-box p {
52
+ margin-top: 5px;
53
+ margin-bottom: 5px;
54
+ }
55
+
56
+
57
  </style>
58
  </head>
59
  <body>
 
61
 
62
  <div class="container">
63
  <h2 class="text-center mb-4">🎙️ Ses Dosyasını Metne Dönüştür</h2>
64
+ <form method="POST" enctype="multipart/form-data">
65
+ <div class="mb-3">
66
+ <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
67
+ <input class="form-control" type="file" name="file" id="file" required>
68
+ </div>
69
+ <div class="d-grid">
70
+ <button type="submit" class="btn btn-primary btn-lg">Yükle ve Dönüştür</button>
71
+ </div>
72
+ </form>
73
 
74
+ {% if metin %}
75
+ <div class="output-box mt-1">
76
+ <h5>🎧 Dönüştürülen Metin:</h5>
77
+ <p>{{ metin }}</p>
78
+ </div>
79
+ {% if ozet %}
80
+ <div class="output-box mt-4">
81
+ <h5>📝 Metnin Özeti:</h5>
82
+ <p>{{ ozet }}</p>
 
 
83
  </div>
84
+ {% endif %}
85
+ {% endif %}
86
 
 
87
  </div>
88
 
89
  <p style="position: fixed; bottom: 20px; left: 20px; color:#ffffff;">Designer by: Burak Tuğrul Aşık & Tarık Kahraman</p>
90
 
91
  <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
 
92
  <script>
93
  particlesJS('particles-js', {
94
  "particles": {
 
114
  },
115
  "retina_detect": true
116
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </script>
118
  </body>
119
  </html>