feat: cache generated audio blobs in IndexedDB for instant replays

[vivek0028]

🚀 Program

GSSoC

📝 Description

This PR significantly improves the performance of the Speech History feature by caching generated audio Blobs locally using IndexedDB.

Previously, clicking Replay on a past message in MessageCard.jsx re-submitted the message text through the useTTS hook, triggering another voice synthesis request to the VoiceForge backend/Hugging Face inference engine. This introduced a 3–5 second delay and unnecessarily consumed server bandwidth and compute resources.

With this change, generated audio is stored locally and retrieved directly from IndexedDB when replaying a message. Cached audio can therefore play instantly without another network request and remains available for offline replay.

Changes Made

• IndexedDB caching (db.js)

  • Incremented the database version.
  • Added an audio_cache object store keyed by message ID.
  • Added saveAudioBlob and getAudioBlob helpers.

• Audio capture (useTTS.js)

  • Updated the TTS flow to fetch generated audio as a raw Blob.
  • Returns the Blob for caching and a URL.createObjectURL() URL for playback.

• History ID synchronization (useSpeechHistory.js)

  • Updated addMessage to reliably return the generated message ID.
  • Allows generated audio to be associated with the correct history entry.

• Instant replay (VoiceForge.jsx & MessageCard.jsx)

  • Replay now checks IndexedDB using the message ID.
  • On a cache hit, the stored Blob is played directly using the HTML5 Audio API.
  • On a cache miss, the application falls back to normal TTS generation and caches the resulting audio for future replays.

🔗 Related Issue

Closes #1062

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔍 SEO improvement
• 🎨 Style / UI improvement
• ♿ Accessibility improvement
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

🧪 How to Test

1. Start the application and open http://localhost:5173 in a browser.
2. Open the VoiceForge Call page and compose a new message.
3. Wait for the initial TTS generation to finish.
4. Open DevTools → Application → IndexedDB → voiceforge_db → audio_cache.
5. Verify that an audio Blob was stored for the generated message.
6. Open Speech History and click Replay on the same message.
7. Verify that the cached audio plays immediately without triggering another TTS generation request.
8. Enable Offline mode in DevTools or disconnect the network.
9. Click Replay again and verify that previously cached audio still plays successfully.
10. Test a message without cached audio and verify that the app falls back to backend generation and caches the result afterward.

📸 Screenshots (if applicable)

Not applicable — this change primarily affects audio caching and replay performance without introducing visual UI changes.

✅ Checklist

• I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format

---

Summary by cubic

Caches generated TTS audio as Blobs in IndexedDB and replays from local cache for instant playback and offline support. This removes repeat synth requests and reduces backend load.

• New Features
  • Added audio_cache in IndexedDB with saveAudioBlob and getAudioBlob.
  • Updated useTTS to fetch the audio Blob, return it, and use a local URL.createObjectURL() for playback.
  • Linked history entries to cached audio: addMessage returns an id; MessageCard passes id to replay; replay checks cache first, falls back to TTS, then caches.
  • Minor UI: added “Clear” in TextToSpeech and “Retry Camera” in Call.

^{Written for commit 91b789a. Summary will update on new commits.}

[vercel]

@vivek0028 is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

@vivek0028, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 22 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0e7c7ee8-ee66-4232-857b-9085bfa3d31c

📥 Commits

Reviewing files that changed from the base of the PR and between e915118 and 91b789a.

📒 Files selected for processing (7)

• client/src/components/MessageCard.jsx
• client/src/components/TextToSpeech.jsx
• client/src/components/VoiceForge.jsx
• client/src/hooks/useSpeechHistory.js
• client/src/hooks/useTTS.js
• client/src/pages/Call.jsx
• client/src/utils/db.js

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

✍️ DCO Sign-off Needed

Hey @vivek0028! 👋 One or more commits in this PR are missing a Signed-off-by: line.

Warning

• 387ccc4 fix: resolve postcss unclosed block error and add UI enhancements
• 664c9c8 Merge pull request: resolved conflict in Call.jsx
• 91b789a feat: cache generated audio blobs in IndexedDB for instant replays

How to fix:

For the latest commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits, replace N with the number to update:

git rebase --signoff HEAD~N
git push --force-with-lease

This comment will update automatically after you push.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[github-actions]

🎉 PR Ready for Mentor Review

Hey @vivek0028! 👋 Your PR passed all checks and is now in the GSSoC review queue.

Note

🔗 Closing: #1062 · 📐 143 lines across 7 file(s) · 📬 Review requested

@sabeenaviklar @Anushreebasics @itsdakshjain @snehkris @1754riya @Mrigakshi-Rathore @Itzzavdheshh @Nitya-003 @4f4d @lovestaco, this PR is ready for your review — please confirm scope, check behavior and tests, then approve or request changes.

Important

This is not an approval. Please wait for mentor feedback before expecting a merge. If changes are requested, push them to this same branch and keep the PR focused on the linked issue.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[cubic-dev-ai]

All reported issues were addressed across 7 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[github-actions]

🎊 PR Merged Successfully

Hey @vivek0028! 👋 Congratulations and thank you for your contribution to VoiceForge!

Note

🔗 Linked issue(s): #1062 · ✅ Marked as merged and complete

Maintainers may still handle final cleanup, release notes, or follow-up tracking after the merge.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[itsdakshjain]

Done