Spaces:

Phoe2004
/

USP

Runtime error

App Files Files Community

Phoe2004 commited on Jun 28

Commit

84d1aad

verified ·

1 Parent(s): 8ce2809

Upload index.html

Browse files

Files changed (1) hide show

index.html +281 -3

index.html CHANGED Viewed

@@ -448,6 +448,85 @@
     color:var(--ink);
     border:1px solid var(--line);
   }
 </style>
 </head>
 <body>
@@ -523,7 +602,7 @@
       <div class="output" id="output">
         <audio id="player" controls></audio>
         <div class="actions">
-          <a class="btn-secondary btn-download" id="downloadLink" download="voice.mp3">
             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
               <path d="M5 19.5h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
@@ -556,6 +635,14 @@
         </div>
       </div>
       <div class="modal-section">
         <div class="modal-row">
           <span class="modal-row-label" data-i18n="developer">ဖန်တီးသူ</span>
@@ -614,7 +701,11 @@
       statusRewardDownload: 'ဒေါင်းလုဒ် အခမဲ့ ရယူရန် ကြော်ငြာ ပြသပါမည်...',
       errSkippedDownload: 'ဒေါင်းလုဒ်ရန် ကြော်ငြာကို အပြည့်အစုံ ကြည့်ပေးပါ။',
       statusSaved: 'Downloads ဖိုလ်ဒါသို့ သိမ်းပြီးပါပြီ။',
-      errSaveFailed: 'ဒေါင်းလုဒ် မအောင်မြင်ပါ။'
     },
     en: {
       eyebrow: 'Voice Studio · Free Text-to-Speech',
@@ -648,7 +739,11 @@
       statusRewardDownload: 'Showing a quick ad to unlock the free download...',
       errSkippedDownload: 'Please watch the full ad to download for free.',
       statusSaved: 'Saved to your Downloads folder.',
-      errSaveFailed: 'Download failed.'
     }
   };
@@ -675,6 +770,7 @@
     uiLang = lang;
     localStorage.setItem('vs_ui_lang', lang);
     applyTranslations();
   }
   applyTranslations();
@@ -691,6 +787,167 @@
     btn.addEventListener('click', () => setUiLang(btn.dataset.lang));
   });
   // ---- Build signature waveform ----
   const wave = document.getElementById('wave');
   const BAR_COUNT = 20;
@@ -926,6 +1183,27 @@
       status.textContent = t('statusDone');
       player.play().catch(() => {});
       notifyInterstitialCheckpoint();
     } catch (e) {
       status.textContent = e.message;
       status.classList.add('error');

     color:var(--ink);
     border:1px solid var(--line);
   }
+  /* ---------- Voice history (inside menu) ---------- */
+  .history-list{
+    display:flex;
+    flex-direction:column;
+    gap:8px;
+    margin-top:10px;
+    max-height:220px;
+    overflow-y:auto;
+  }
+  .history-item{
+    display:flex;
+    align-items:center;
+    gap:10px;
+    padding:8px;
+    border:1px solid var(--line);
+    border-radius:10px;
+    background:var(--surface-2);
+  }
+  .history-play{
+    width:30px;
+    height:30px;
+    border-radius:50%;
+    background:var(--accent);
+    border:none;
+    color:#fff;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    flex-shrink:0;
+    cursor:pointer;
+    padding:0;
+  }
+  .history-play svg{ width:13px; height:13px; }
+  .history-play[disabled]{ background:#C7CCD6; cursor:not-allowed; }
+  .history-meta{ flex:1; min-width:0; }
+  .history-text{
+    font-family:var(--mm);
+    font-size:13px;
+    color:var(--ink);
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+  .history-sub{
+    font-family:var(--sans);
+    font-size:11px;
+    color:var(--ink-soft);
+    margin-top:2px;
+  }
+  .history-delete{
+    width:26px;
+    height:26px;
+    border-radius:50%;
+    border:none;
+    background:transparent;
+    color:var(--ink-soft);
+    font-size:17px;
+    line-height:1;
+    cursor:pointer;
+    flex-shrink:0;
+  }
+  .history-empty{
+    font-family:var(--sans);
+    font-size:13px;
+    color:var(--ink-soft);
+    padding:8px 0 0;
+  }
+  .history-clear{
+    margin-top:10px;
+    font-family:var(--sans);
+    font-size:12px;
+    font-weight:600;
+    color:#D14343;
+    background:none;
+    border:none;
+    cursor:pointer;
+    padding:0;
+  }
 </style>
 </head>
 <body>
       <div class="output" id="output">
         <audio id="player" controls></audio>
         <div class="actions">
+          <a class="btn-primary btn-download" id="downloadLink" download="voice.mp3">
             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
               <path d="M5 19.5h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
         </div>
       </div>
+      <div class="modal-section">
+        <div class="modal-row-label" data-i18n="historyLabel">Voice History</div>
+        <div id="historyList" class="history-list"></div>
+        <div id="historyEmpty" class="history-empty" data-i18n="historyEmpty">မှတ်တမ်း မရှိသေးပါ။</div>
+        <button id="clearHistoryBtn" class="history-clear" data-i18n="clearHistory">မှတ်တမ်း ရှင်းမည်</button>
+        <audio id="historyAudio" style="display:none"></audio>
+      </div>
       <div class="modal-section">
         <div class="modal-row">
           <span class="modal-row-label" data-i18n="developer">ဖန်တီးသူ</span>
       statusRewardDownload: 'ဒေါင်းလုဒ် အခမဲ့ ရယူရန် ကြော်ငြာ ပြသပါမည်...',
       errSkippedDownload: 'ဒေါင်းလုဒ်ရန် ကြော်ငြာကို အပြည့်အစုံ ကြည့်ပေးပါ။',
       statusSaved: 'Downloads ဖိုလ်ဒါသို့ သိမ်းပြီးပါပြီ။',
+      errSaveFailed: 'ဒေါင်းလုဒ် မအောင်မြင်ပါ။',
+      historyLabel: 'အသံ မှတ်တမ်း',
+      historyEmpty: 'မှတ်တမ်း မရှိသေးပါ။',
+      clearHistory: 'မှတ်တမ်း ရှင်းမည်',
+      historyAudioUnavailable: 'ဖိုင်ကြီးလွန်းသောကြောင့် ပြန်နားထောင်ရန် မသိမ်းထားပါ'
     },
     en: {
       eyebrow: 'Voice Studio · Free Text-to-Speech',
       statusRewardDownload: 'Showing a quick ad to unlock the free download...',
       errSkippedDownload: 'Please watch the full ad to download for free.',
       statusSaved: 'Saved to your Downloads folder.',
+      errSaveFailed: 'Download failed.',
+      historyLabel: 'Voice History',
+      historyEmpty: 'No history yet.',
+      clearHistory: 'Clear history',
+      historyAudioUnavailable: 'Too large to keep for replay'
     }
   };
     uiLang = lang;
     localStorage.setItem('vs_ui_lang', lang);
     applyTranslations();
+    renderHistory();
   }
   applyTranslations();
     btn.addEventListener('click', () => setUiLang(btn.dataset.lang));
   });
+  // ---- Voice history (stored in localStorage, played back from the menu) ----
+  const HISTORY_KEY = 'vs_history_v1';
+  const MAX_HISTORY = 8;
+  const MAX_HISTORY_AUDIO_BYTES = 1.5 * 1024 * 1024; // ~1.5MB cap per stored clip
+  const TIME_STR = {
+    my: {
+      justNow: () => 'ခုလေးတင်',
+      minAgo: (n) => `${n} မိနစ်အကြာ`,
+      hourAgo: (n) => `${n} နာရီအကြာ`,
+      dayAgo: (n) => `${n} ရက်အကြာ`
+    },
+    en: {
+      justNow: () => 'just now',
+      minAgo: (n) => `${n}m ago`,
+      hourAgo: (n) => `${n}h ago`,
+      dayAgo: (n) => `${n}d ago`
+    }
+  };
+  function relativeTime(ts) {
+    const diffSec = Math.max(0, Math.floor((Date.now() - ts) / 1000));
+    const dict = TIME_STR[uiLang] || TIME_STR.my;
+    if (diffSec < 60) return dict.justNow();
+    const mins = Math.floor(diffSec / 60);
+    if (mins < 60) return dict.minAgo(mins);
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return dict.hourAgo(hours);
+    return dict.dayAgo(Math.floor(hours / 24));
+  }
+  function loadHistory() {
+    try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]'); }
+    catch (e) { return []; }
+  }
+  function saveHistory(list) {
+    try {
+      localStorage.setItem(HISTORY_KEY, JSON.stringify(list));
+    } catch (e) {
+      // Quota exceeded (likely too many large audio clips) — drop the oldest
+      // half and retry once before giving up silently.
+      try {
+        const trimmed = list.slice(0, Math.ceil(list.length / 2));
+        localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
+      } catch (e2) { /* give up quietly, history just won't persist */ }
+    }
+  }
+  function addHistoryEntry(entry) {
+    const list = loadHistory();
+    list.unshift(entry);
+    while (list.length > MAX_HISTORY) list.pop();
+    saveHistory(list);
+    renderHistory();
+  }
+  function deleteHistoryEntry(id) {
+    const list = loadHistory().filter(e => e.id !== id);
+    saveHistory(list);
+    renderHistory();
+  }
+  function clearHistory() {
+    saveHistory([]);
+    renderHistory();
+  }
+  const historyListEl = document.getElementById('historyList');
+  const historyEmptyEl = document.getElementById('historyEmpty');
+  const historyAudio = document.getElementById('historyAudio');
+  let activeHistoryPlayBtn = null;
+  function playIconSvg() {
+    return '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5.5v13l11-6.5-11-6.5z"/></svg>';
+  }
+  function pauseIconSvg() {
+    return '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3.5v14H7V5zm6.5 0H17v14h-3.5V5z"/></svg>';
+  }
+  function resetActivePlayButton() {
+    if (activeHistoryPlayBtn) {
+      activeHistoryPlayBtn.innerHTML = playIconSvg();
+      activeHistoryPlayBtn = null;
+    }
+  }
+  historyAudio.addEventListener('ended', resetActivePlayButton);
+  historyAudio.addEventListener('pause', () => {
+    if (activeHistoryPlayBtn) activeHistoryPlayBtn.innerHTML = playIconSvg();
+  });
+  function renderHistory() {
+    const list = loadHistory();
+    historyListEl.innerHTML = '';
+    activeHistoryPlayBtn = null;
+    if (!list.length) {
+      historyEmptyEl.style.display = 'block';
+      return;
+    }
+    historyEmptyEl.style.display = 'none';
+    list.forEach(entry => {
+      const row = document.createElement('div');
+      row.className = 'history-item';
+      const playBtn = document.createElement('button');
+      playBtn.className = 'history-play';
+      playBtn.innerHTML = playIconSvg();
+      if (!entry.audio) {
+        playBtn.disabled = true;
+        playBtn.title = t('historyAudioUnavailable');
+      } else {
+        playBtn.addEventListener('click', () => {
+          const isThisPlaying = activeHistoryPlayBtn === playBtn && !historyAudio.paused;
+          resetActivePlayButton();
+          if (isThisPlaying) return; // was playing -> just stop
+          historyAudio.src = entry.audio;
+          historyAudio.play().catch(() => {});
+          playBtn.innerHTML = pauseIconSvg();
+          activeHistoryPlayBtn = playBtn;
+        });
+      }
+      const meta = document.createElement('div');
+      meta.className = 'history-meta';
+      const textEl = document.createElement('div');
+      textEl.className = 'history-text';
+      textEl.textContent = entry.textPreview;
+      const subEl = document.createElement('div');
+      subEl.className = 'history-sub';
+      subEl.textContent = `${entry.langLabel || ''} · ${entry.voiceLabel || ''} · ${relativeTime(entry.ts)}`;
+      meta.appendChild(textEl);
+      meta.appendChild(subEl);
+      const delBtn = document.createElement('button');
+      delBtn.className = 'history-delete';
+      delBtn.textContent = '\u00d7';
+      delBtn.addEventListener('click', () => {
+        if (activeHistoryPlayBtn === playBtn) {
+          historyAudio.pause();
+        }
+        deleteHistoryEntry(entry.id);
+      });
+      row.appendChild(playBtn);
+      row.appendChild(meta);
+      row.appendChild(delBtn);
+      historyListEl.appendChild(row);
+    });
+  }
+  document.getElementById('clearHistoryBtn').addEventListener('click', () => {
+    historyAudio.pause();
+    clearHistory();
+  });
+  renderHistory();
   // ---- Build signature waveform ----
   const wave = document.getElementById('wave');
   const BAR_COUNT = 20;
       status.textContent = t('statusDone');
       player.play().catch(() => {});
       notifyInterstitialCheckpoint();
+      // Save to Voice History (skip storing audio itself if the clip is too
+      // large, to keep localStorage usage reasonable).
+      (async () => {
+        let audioDataUrl = null;
+        if (blob.size <= MAX_HISTORY_AUDIO_BYTES) {
+          try { audioDataUrl = await blobToBase64(blob); } catch (e) { audioDataUrl = null; }
+        }
+        addHistoryEntry({
+          id: Date.now() + '_' + Math.random().toString(36).slice(2, 8),
+          textPreview: value.length > 80 ? value.slice(0, 80) + '…' : value,
+          voiceLabel: voiceSelect.options[voiceSelect.selectedIndex]
+            ? voiceSelect.options[voiceSelect.selectedIndex].textContent.trim()
+            : voice,
+          langLabel: langSelect.options[langSelect.selectedIndex]
+            ? langSelect.options[langSelect.selectedIndex].textContent.trim()
+            : '',
+          ts: Date.now(),
+          audio: audioDataUrl
+        });
+      })();
     } catch (e) {
       status.textContent = e.message;
       status.classList.add('error');