Skip to content

Frontend Integration of Backend APIs with Toggle-Based Mode Switching

srilatha bandari requested to merge feat/connect into develop

Summary

This MR implements full backend API integration in the frontend along with a toggle-based mode switching system.

The toggle allows switching between:

  • Backend Mode (ON): All features use backend APIs
  • Local Mode (OFF): All features use local model (no API calls)

This ensures backend APIs act as the single source of truth when enabled, while still supporting local/offline processing.

Additionally, this MR improves the transcription UX by introducing dynamic transcription actions, including support for "Transcribe Again" and restoring the Stop functionality during processing.

Changes Made

Backend API Integration

  • Integrated all required endpoints from the backend (develop branch)
  • Created a centralized API service (services/api.ts)
  • Replaced all mock/static data with real API calls
  • Configured API base URL using environment variables
  • Standardized API request and response handling

Toggle Mode Implementation

  • Added a toggle to switch between backend and local modes
  • Implemented a unified handler (processAudio) to control execution flow
  • Ensured all features (upload, mic, streaming) follow the selected mode

Transcription UX Improvements

  • Added dynamic button states for transcription:

    • "Transcribe" for new audio
    • "Transcribe Again" for already transcribed audio

  • Restored "Stop" button during active transcription

  • Added proper loading state ("Transcribing...")

  • Prevented multiple triggers during processing

  • Ensured UI updates immediately after transcription completion

Code Improvements

  • Centralized API logic for better maintainability
  • Added error handling for API failures
  • Added loading states for async operations
  • Removed scattered and inconsistent API usage

Screenshots

image image image

Testing Done

  • Verified backend APIs are correctly triggered in ON mode

  • Verified no API calls occur in OFF mode

  • Tested core flows: audio upload, microphone input, streaming

  • Verified:

    • "Transcribe" → for new files
    • "Transcribe Again" → after transcription
    • "Stop" → during processing

  • Confirmed smooth switching between modes

  • No regressions observed

Checklist

  • Backend APIs integrated
  • Toggle mode implemented
  • Transcription button states updated
  • Stop functionality restored
  • Tested locally
  • No known regressions
  • Ready for review

closes #14 (closed) #15 (closed)

Edited by srilatha bandari

Merge request reports