Hugging Face's logo

Spaces:
bitsnaps
/
TranStudio
Paused

App Files Community
bitsnaps commited on
Commit
67a53fe
·
verified ·
1 Parent(s): 46d08fc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +242 -86
index.html CHANGED
@@ -41,6 +41,12 @@
41
  <b-icon icon="folder"></b-icon>
42
  <span class="ml-1">My Files</span>
43
  </b-navbar-item>
 
 
 
 
 
 
44
  <b-navbar-item @click="logout">Logout {{ username }}</b-navbar-item>
45
  </template>
46
  <template v-else>
@@ -54,7 +60,7 @@
54
  <div class="columns mb-6 pb-6">
55
  <!-- Sidebar -->
56
  <div class="column is-one-quarter" v-if="showSidebar">
57
- <b-menu>
58
 
59
  <b-menu-list :label="`Previous Transcriptions (${transcriptions.length})`">
60
  <b-menu-item v-for="transcription in transcriptions"
@@ -66,12 +72,20 @@
66
  <span>
67
  {{transcription?.audio_file}}
68
  </span>
69
- <b-button
70
- type="is-danger"
71
- size="is-small"
72
- icon-left="delete"
73
- @click.stop="deleteTranscription(transcription.id)">
74
- </b-button>
 
 
 
 
 
 
 
 
75
  </div>
76
  </b-menu-item>
77
  </b-menu-list>
@@ -194,6 +208,10 @@
194
 
195
  <b-button type="is-primary" class="mr-2" @click="processTranscription" :disabled="!audioUrl" :loading="isProcessing">Process</b-button>
196
  <b-button type="is-success" class="mr-2" @click="saveTranscription" :disabled="!transcriptionText" :loading="isProcessing">Save</b-button>
 
 
 
 
197
  <b-button class="control-btn" @click="togglePlayer" :disabled="!audioUrl">
198
  <b-icon :icon="showPlayer ? 'menu-down' : 'menu-up'"></b-icon>
199
  </b-button>
@@ -294,80 +312,185 @@
294
  </b-modal>
295
 
296
  <!-- Admin Panel Modal -->
297
- <b-modal v-model="showAdminPanel" has-modal-card trap-focus :width="640">
298
  <div class="modal-card">
299
  <header class="modal-card-head">
300
- <p class="modal-card-title">User Management</p>
301
  </header>
302
  <section class="modal-card-body">
303
- <div class="block">
304
- <b-field grouped>
305
- <b-input placeholder="Search users..." v-model="userSearchQuery" expanded></b-input>
306
- <b-button type="is-primary" icon-left="magnify">Search</b-button>
307
- </b-field>
308
- </div>
309
-
310
- <b-table
311
- :data="filteredUsers"
312
- :loading="loadingUsers"
313
- :paginated="true"
314
- :per-page="5"
315
- :mobile-cards="true">
316
-
317
- <b-table-column field="id" label="ID" width="40" numeric v-slot="props">
318
- {{ props.row.id }}
319
- </b-table-column>
320
-
321
- <b-table-column field="username" label="Username" v-slot="props">
322
- {{ props.row.username }}
323
- </b-table-column>
324
-
325
- <b-table-column field="email" label="Email" v-slot="props">
326
- {{ props.row.email }}
327
- </b-table-column>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
 
329
- <b-table-column field="is_admin" label="Admin" v-slot="props">
330
- <b-icon
331
- :icon="props.row.is_admin ? 'check' : 'close'"
332
- :type="props.row.is_admin ? 'is-success' : 'is-danger'">
333
- </b-icon>
334
- </b-table-column>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
 
336
- <b-table-column field="disabled" label="Status" v-slot="props">
337
- <b-tag :type="props.row.disabled ? 'is-danger' : 'is-success'">
338
- {{ props.row.disabled ? 'Disabled' : 'Active' }}
339
- </b-tag>
340
- </b-table-column>
341
 
342
- <b-table-column label="Actions" v-slot="props">
343
- <div class="buttons">
344
- <b-button
345
- size="is-small"
346
- :type="props.row.disabled ? 'is-success' : 'is-warning'"
347
- :icon-left="props.row.disabled ? 'account-check' : 'account-cancel'"
348
- @click="toggleUserStatus(props.row)"
349
- :disabled="props.row.is_admin && props.row.id === currentUser.id">
350
- {{ props.row.disabled ? 'Enable' : 'Disable' }}
351
- </b-button>
352
- <b-button
353
- size="is-small"
354
- type="is-danger"
355
- icon-left="delete"
356
- @click="deleteUser(props.row)"
357
- :disabled="props.row.id === currentUser.id">
358
- Delete
359
- </b-button>
360
- </div>
361
- </b-table-column>
362
 
363
- <template #empty>
364
- <div class="has-text-centered">No users found</div>
365
- </template>
366
- </b-table>
367
  </section>
368
  <footer class="modal-card-foot">
369
- <b-button @click="refreshUsers" type="is-info" icon-left="refresh">Refresh</b-button>
370
- <b-button @click="showAdminPanel = false">Close</b-button>
371
  </footer>
372
  </div>
373
  </b-modal>
@@ -472,7 +595,7 @@
472
  </b-field>
473
  </b-field>
474
 
475
- <b-table
476
  :data="filteredAudioFiles"
477
  :loading="loadingAudioFiles"
478
  :paginated="uploadedAudioFiles.length > 10"
@@ -496,6 +619,10 @@
496
  {{ new Date(props.row.uploaded_at).toLocaleString() }}
497
  </b-table-column>
498
 
 
 
 
 
499
  <b-table-column label="Actions" v-slot="props">
500
  <div class="buttons">
501
  <b-button
@@ -515,22 +642,9 @@
515
  </div>
516
  </b-table-column>
517
 
518
- <template #empty>
519
- <div class="has-text-centered">
520
- <p>No audio files found</p>
521
- <b-button
522
- class="mt-2"
523
- type="is-primary"
524
- icon-left="upload"
525
- @click="showResumeUploadModal">
526
- Upload Audio
527
- </b-button>
528
- </div>
529
- </template>
530
-
531
  <template #detail="props">
532
  <div class="content">
533
- <audio controls :src="`/uploads/${props.row.filename}`" style="width: 100%"></audio>
534
  </div>
535
  </template>
536
  </b-table>
@@ -543,6 +657,48 @@
543
  </footer>
544
  </div>
545
  </b-modal>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
546
  </div><!-- #app -->
547
 
548
  <script src="/static/js/howler.min.js"></script>
 
41
  <b-icon icon="folder"></b-icon>
42
  <span class="ml-1">My Files</span>
43
  </b-navbar-item>
44
+ <b-button
45
+ type="is-light"
46
+ icon-left="clock-outline"
47
+ @click="showCreditsInfo">
48
+ Credits
49
+ </b-button>
50
  <b-navbar-item @click="logout">Logout {{ username }}</b-navbar-item>
51
  </template>
52
  <template v-else>
 
60
  <div class="columns mb-6 pb-6">
61
  <!-- Sidebar -->
62
  <div class="column is-one-quarter" v-if="showSidebar">
63
+ <b-menu>
64
 
65
  <b-menu-list :label="`Previous Transcriptions (${transcriptions.length})`">
66
  <b-menu-item v-for="transcription in transcriptions"
 
72
  <span>
73
  {{transcription?.audio_file}}
74
  </span>
75
+ <div class="buttons are-small">
76
+ <b-button
77
+ type="is-info"
78
+ size="is-small"
79
+ icon-left="download"
80
+ @click.stop="downloadTranscription(transcription)">
81
+ </b-button>
82
+ <b-button
83
+ type="is-danger"
84
+ size="is-small"
85
+ icon-left="delete"
86
+ @click.stop="deleteTranscription(transcription.id)">
87
+ </b-button>
88
+ </div>
89
  </div>
90
  </b-menu-item>
91
  </b-menu-list>
 
208
 
209
  <b-button type="is-primary" class="mr-2" @click="processTranscription" :disabled="!audioUrl" :loading="isProcessing">Process</b-button>
210
  <b-button type="is-success" class="mr-2" @click="saveTranscription" :disabled="!transcriptionText" :loading="isProcessing">Save</b-button>
211
+ <b-button type="is-info" class="mr-2" @click="downloadCurrentTranscription" :disabled="!transcriptionText">
212
+ <b-icon icon="download"></b-icon>
213
+ <span>Download</span>
214
+ </b-button>
215
  <b-button class="control-btn" @click="togglePlayer" :disabled="!audioUrl">
216
  <b-icon :icon="showPlayer ? 'menu-down' : 'menu-up'"></b-icon>
217
  </b-button>
 
312
  </b-modal>
313
 
314
  <!-- Admin Panel Modal -->
315
+ <b-modal v-model="showAdminPanel" has-modal-card trap-focus full-screen>
316
  <div class="modal-card">
317
  <header class="modal-card-head">
318
+ <p class="modal-card-title">Admin Panel</p>
319
  </header>
320
  <section class="modal-card-body">
321
+ <!-- Add tabs for different admin functions -->
322
+ <b-tabs v-model="activeAdminTab">
323
+ <!-- User Management Tab -->
324
+ <b-tab-item label="User Management" icon="account-group">
325
+ <div class="block">
326
+ <b-field grouped>
327
+ <b-input placeholder="Search users..." v-model="userSearchQuery" expanded></b-input>
328
+ <b-button type="is-primary" icon-left="magnify">Search</b-button>
329
+ </b-field>
330
+ </div>
331
+
332
+ <b-table
333
+ :data="filteredUsers"
334
+ :loading="loadingUsers"
335
+ :paginated="true"
336
+ :per-page="5"
337
+ :mobile-cards="true">
338
+
339
+ <!-- Existing user table columns -->
340
+ <b-table-column field="id" label="ID" width="40" numeric v-slot="props">
341
+ {{ props.row.id }}
342
+ </b-table-column>
343
+
344
+ <!-- ... other existing columns ... -->
345
+ <b-table-column field="username" label="Username" v-slot="props">
346
+ {{ props.row.username }}
347
+ </b-table-column>
348
+
349
+ <b-table-column field="email" label="Email" v-slot="props">
350
+ {{ props.row.email }}
351
+ </b-table-column>
352
+
353
+ <b-table-column field="is_admin" label="Admin" v-slot="props">
354
+ <b-icon
355
+ :icon="props.row.is_admin ? 'check' : 'close'"
356
+ :type="props.row.is_admin ? 'is-success' : 'is-danger'">
357
+ </b-icon>
358
+ </b-table-column>
359
+
360
+ <b-table-column field="disabled" label="Status" v-slot="props">
361
+ <b-tag :type="props.row.disabled ? 'is-danger' : 'is-success'">
362
+ {{ props.row.disabled ? 'Disabled' : 'Active' }}
363
+ </b-tag>
364
+ </b-table-column>
365
+
366
+ <b-table-column label="Actions" v-slot="props">
367
+ <div class="buttons">
368
+ <b-button
369
+ size="is-small"
370
+ :type="props.row.disabled ? 'is-success' : 'is-warning'"
371
+ :icon-left="props.row.disabled ? 'account-check' : 'account-cancel'"
372
+ @click="toggleUserStatus(props.row)"
373
+ :disabled="props.row.is_admin && props.row.id === currentUser.id">
374
+ {{ props.row.disabled ? 'Enable' : 'Disable' }}
375
+ </b-button>
376
+ <b-button
377
+ size="is-small"
378
+ type="is-danger"
379
+ icon-left="delete"
380
+ @click="deleteUser(props.row)"
381
+ :disabled="props.row.id === currentUser.id">
382
+ Delete
383
+ </b-button>
384
+ </div>
385
+ </b-table-column>
386
+
387
+ <template #empty>
388
+ <div class="has-text-centered">No users found</div>
389
+ </template>
390
+ </b-table>
391
+ </b-tab-item>
392
 
393
+ <!-- Credit Management Tab -->
394
+ <b-tab-item label="Credit Management" icon="clock-outline">
395
+ <div class="block">
396
+ <b-field grouped>
397
+ <b-input placeholder="Search users..." v-model="creditSearchQuery" expanded></b-input>
398
+ <b-button type="is-primary" icon-left="magnify">Search</b-button>
399
+ </b-field>
400
+ </div>
401
+
402
+ <b-table
403
+ :data="filteredCredits"
404
+ :loading="loadingCredits"
405
+ :paginated="true"
406
+ :per-page="5"
407
+ :mobile-cards="true">
408
+
409
+ <b-table-column field="user_id" label="ID" width="40" numeric v-slot="props">
410
+ {{ props.row.user_id }}
411
+ </b-table-column>
412
+
413
+ <b-table-column field="username" label="Username" v-slot="props">
414
+ {{ props.row.username }}
415
+ </b-table-column>
416
+
417
+ <b-table-column field="minutes_used" label="Minutes Used" numeric v-slot="props">
418
+ {{ props.row.minutes_used }}
419
+ </b-table-column>
420
+
421
+ <b-table-column field="minutes_quota" label="Quota" numeric v-slot="props">
422
+ {{ props.row.minutes_quota }}
423
+ </b-table-column>
424
+
425
+ <b-table-column field="minutes_remaining" label="Remaining" numeric v-slot="props">
426
+ <b-tag :type="getQuotaTagType(props.row)">
427
+ {{ props.row.minutes_remaining }}
428
+ </b-tag>
429
+ </b-table-column>
430
+
431
+ <b-table-column field="last_updated" label="Last Updated" v-slot="props">
432
+ {{ new Date(props.row.last_updated).toLocaleString() }}
433
+ </b-table-column>
434
+
435
+ <b-table-column label="Actions" v-slot="props">
436
+ <div class="buttons">
437
+ <b-button
438
+ size="is-small"
439
+ type="is-info"
440
+ icon-left="pencil"
441
+ @click="editUserCredits(props.row)">
442
+ Edit
443
+ </b-button>
444
+ <b-button
445
+ size="is-small"
446
+ type="is-warning"
447
+ icon-left="refresh"
448
+ @click="resetUserQuota(props.row)">
449
+ Reset Quota
450
+ </b-button>
451
+ </div>
452
+ </b-table-column>
453
+
454
+ <template #empty>
455
+ <div class="has-text-centered">No credit data found</div>
456
+ </template>
457
+ </b-table>
458
+ </b-tab-item>
459
+ </b-tabs>
460
+ </section>
461
+ <footer class="modal-card-foot">
462
+ <b-button @click="refreshAdminData" type="is-info" icon-left="refresh">Refresh</b-button>
463
+ <b-button @click="showAdminPanel = false">Close</b-button>
464
+ </footer>
465
+ </div>
466
+ </b-modal>
467
+
468
+ <!-- Add Credit Edit Modal -->
469
+ <b-modal v-model="showCreditEditModal" has-modal-card trap-focus>
470
+ <div class="modal-card">
471
+ <header class="modal-card-head">
472
+ <p class="modal-card-title">Edit User Credits</p>
473
+ </header>
474
+ <section class="modal-card-body">
475
+ <div v-if="selectedUserCredit">
476
+ <p class="mb-3"><strong>User:</strong> {{ selectedUserCredit.username }}</p>
477
 
478
+ <b-field label="Minutes Used">
479
+ <b-numberinput v-model="editCreditForm.minutes_used" min="0" step="1"></b-numberinput>
480
+ </b-field>
 
 
481
 
482
+ <b-field label="Minutes Quota">
483
+ <b-numberinput v-model="editCreditForm.minutes_quota" min="0" step="1"></b-numberinput>
484
+ </b-field>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
485
 
486
+ <div class="notification is-info is-light mt-4">
487
+ <p>Adjusting credits will affect the user's usage tracking and may impact billing.</p>
488
+ </div>
489
+ </div>
490
  </section>
491
  <footer class="modal-card-foot">
492
+ <b-button type="is-primary" @click="saveUserCredits" :loading="savingCredits">Save</b-button>
493
+ <b-button @click="showCreditEditModal = false">Cancel</b-button>
494
  </footer>
495
  </div>
496
  </b-modal>
 
595
  </b-field>
596
  </b-field>
597
 
598
+ <b-table
599
  :data="filteredAudioFiles"
600
  :loading="loadingAudioFiles"
601
  :paginated="uploadedAudioFiles.length > 10"
 
619
  {{ new Date(props.row.uploaded_at).toLocaleString() }}
620
  </b-table-column>
621
 
622
+ <b-table-column v-if="isAdmin" field="username" label="User" v-slot="props">
623
+ {{ props.row.username || 'Unknown' }}
624
+ </b-table-column>
625
+
626
  <b-table-column label="Actions" v-slot="props">
627
  <div class="buttons">
628
  <b-button
 
642
  </div>
643
  </b-table-column>
644
 
 
 
 
 
 
 
 
 
 
 
 
 
 
645
  <template #detail="props">
646
  <div class="content">
647
+ <audio controls :src="getAudioUrl(props.row)" style="width: 100%"></audio>
648
  </div>
649
  </template>
650
  </b-table>
 
657
  </footer>
658
  </div>
659
  </b-modal>
660
+
661
+ <!-- Show Credit Modal -->
662
+ <b-modal v-model="showCreditsModal" has-modal-card trap-focus>
663
+ <div class="modal-card">
664
+ <header class="modal-card-head">
665
+ <p class="modal-card-title">Your Transcription Credits</p>
666
+ </header>
667
+ <section class="modal-card-body">
668
+ <div class="content">
669
+ <div class="box">
670
+ <h4 class="title is-4">Usage Summary</h4>
671
+ <p>
672
+ <b-icon icon="clock-outline" size="is-small"></b-icon>
673
+ <strong>Total Minutes Used:</strong> {{ currentUserCredit.minutes_used }}
674
+ </p>
675
+ <p>
676
+ <b-icon icon="timer-outline" size="is-small"></b-icon>
677
+ <strong>Minutes Quota:</strong> {{ currentUserCredit.minutes_quota }}
678
+ </p>
679
+ <p>
680
+ <b-icon icon="timer-sand" size="is-small"></b-icon>
681
+ <strong>Minutes Remaining:</strong>
682
+ <b-tag :type="getQuotaTagType(currentUserCredit)">
683
+ {{ currentUserCredit.minutes_remaining }}
684
+ </b-tag>
685
+ </p>
686
+ <p v-if="currentUserCredit.last_updated">
687
+ <b-icon icon="calendar-clock" size="is-small"></b-icon>
688
+ <strong>Last Updated:</strong> {{ new Date(currentUserCredit.last_updated).toLocaleString() }}
689
+ </p>
690
+ </div>
691
+
692
+ <div class="notification is-info is-light">
693
+ <p>Your usage is tracked to provide you with accurate billing information.</p>
694
+ </div>
695
+ </div>
696
+ </section>
697
+ <footer class="modal-card-foot">
698
+ <b-button @click="showCreditsModal = false">Close</b-button>
699
+ </footer>
700
+ </div>
701
+ </b-modal>
702
  </div><!-- #app -->
703
 
704
  <script src="/static/js/howler.min.js"></script>