whispering Svelte Themes

Whispering

#svelte #sveltekit #tailwindcss #tauri
Demo Download

Whispering

Whispering

Seamless dictation powered by OpenAI's Whisper Model

MIT License TypeScript Rust Chrome macOS Windows Linux

About

Whispering is an open-source transcription application that provides global speech-to-text functionality, with options such as keyboard shortcuts and automatic copy and paste to make dictating as seamless as possible.

Under the hood, it's powered by OpenAI's Whisper model, making it significantly more accurate than built-in dictation.

Demos

https://github.com/user-attachments/assets/eca93701-10a0-4d91-b38a-f715bd7e0357

https://github.com/user-attachments/assets/a7934f1f-d08b-4037-9bbc-aadd1b13501e

Key Features

  1. Global Transcription: Access Whisper's speech-to-text functionality anywhere with a global keyboard shortcut or within two button clicks.
  2. Cross-Platform Experience:
    • Desktop App: Enables global transcription across all applications.
    • Browser Extension: Provides global transcription in the browser by communicating with the web app.
  3. Chat Integration: The browser extension adds a recording button to ChatGPT and Claude websites, allowing direct voice input and transcription in the chat interface.
  4. Transcription Management: Review and edit transcriptions within the Whispering app to ensure accuracy and clarity.
  5. Automatic Clipboard Integration: Once transcription is complete, the text is automatically copied to your clipboard. An option for automatic pasting is also available.

How is my data stored?

Whispering stores as much data as possible locally on your device, including recordings and text transcriptions. This approach ensures maximum privacy and data security. Here's an overview of how data is handled:

  1. Local Storage: Voice recordings and transcriptions are stored in IndexedDB, which is used as a blob storage and a place to store all of your data like text and transcriptions.

  2. Transcription Service: The only data sent elsewhere is your recording to an external transcription service—if you choose one. You have the following options:

    • External services like OpenAI or Groq
    • A local transcription service such as faster-whisper-server, which keeps everything on-device

  3. Configurable Settings: You can change the transcription service in the settings to ensure maximum local functionality.

Installation

Web App

Visit whispering.bradenwong.com, which has the latest version of the apps/app folder hosted on Vercel.

Chrome Extension

Install the Chrome Extension from the Chrome Web Store here.

Desktop App

To download and install the Whispering desktop app, follow the steps for your operating system:

Windows

  1. Download the installation package ending in .msi from the latest releases page.
  2. Open the downloaded .msi file to run the installer.
  3. If prompted as unsafe, click on More Info -> Run Anyway to proceed with the installation.
  4. Follow the on-screen instructions to complete the installation.

macOS

For macOS, follow these steps to install Whispering:

  1. Download the installation package:

    • Visit the latest releases page.
    • Choose the appropriate package:
      • For Apple Silicon: Whispering_x.x.x_aarch64.dmg
      • For Intel: Whispering_x.x.x_x64.dmg

  2. Install the application:

    • Open the downloaded .dmg file.
    • Drag the Whispering app to the Applications folder.

  3. Launch Whispering:

    • Open Whispering from the Applications folder.
    • If you see a warning about unverified developer:
      • Click Cancel
      • Right-click the app in Finder and select Open

  4. Troubleshooting (Apple Silicon only): If you encounter the error "Whispering" is damaged and can't be opened:

    • Open Terminal
    • Run the following command:
      xattr -cr /Applications/Whispering.app
    • Try opening the application again

After completing these steps, Whispering should be ready to use on your macOS system.

Linux

For Linux, there are multiple installation options available. Choose the one that suits your environment:

  1. AppImage:

    • Download the .AppImage file from the latest releases page.
    • Make the file executable:
      chmod +x whispering_x.x.x_amd64.AppImage
    • Run the AppImage:
      ./whispering_x.x.x_amd64.AppImage

  2. DEB Package (Debian/Ubuntu):

    • Download the .deb file from the latest releases page.
    • Install the package using dpkg:
      sudo dpkg -i whispering_x.x.x_amd64.deb
    • Resolve any dependency issues:
      sudo apt-get install -f

After installation, the app will be ready to use.

Usage

Chrome Extension

After installing the Chrome Extension, you will find a Whispering icon on the Chrome extensions bar. Click on this icon to open the extension. Click the microphone button to record your voice, and then click the square button when you're done. Your transcription will appear in the text box below.

To access the ChatGPT or Claude feature, navigate to the ChatGPT or Claude web page. You'll see a new recording button in the chat interface. Click this button to start and stop recording, and the transcribed text will be automatically inserted into the chat input field.

To access the shortcut feature, press Control + Shift + X or Command + Shift + X (later configurable through Chrome extension shortcuts) to start recording from any website. The transcription will be automatically copied into your clipboard and paste into the current input field.

The Chrome Extension communicates with whispering.bradenwong.com, and will automatically attempt to create a tab in the background if it does not find one. Most bugs can be attributed to this communication failing, such as rare instances where the tab falls asleep.

Web App

The web app is accessible via whispering.bradenwong.com. Click the microphone button to record your voice, and then click the square button when you're done. Your transcription will appear in the text box.

Desktop App

After installing the Whispering desktop app, press Control/Command + Shift + ; (configurable in settings) to start recording from anywhere on your desktop. The transcription will be automatically copied into your clipboard and pasted, though both features can be toggled in the settings.

Built With

Web and Desktop

The Whispering app is built using the following technologies and libraries:

  • Svelte 5: The UI reactivity library of choice.
  • SvelteKit: For routing and static site generation, used for making both the website and the static frontend for the Tauri app.
  • Tauri: The desktop app framework.
  • Effect-TS: To sprinkle some functional programming and write extremely type-safe functions, where errors are included in the return type of the function signature.
  • Svelte Sonner: A simple, customizable toast library for Svelte applications. Used to capture and display errors bubbled up via Effect-TS using the renderAsToast function.
  • TanStack Table: To power all data tables.
  • IndexedDB: A low-level API for storing large amounts of structured data in the browser. Synchronized with Tanstack Table using an Effect service in RecordingDbServiceIndexedDbLive.svelte.ts.
  • ShadCN-Svelte: The UI component library of choice.
  • TailwindCSS: A utility-first CSS framework for rapidly building custom user interfaces.
  • Turborepo: For monorepo management, so that apps/app and apps/extension can share the same codebase, drastically reducing code duplication and more importantly, keeping a single source of truth.
  • Rust: For extending desktop app features, such as using the enigo crate for handling automatic pasting.
  • Vercel: Hosting that's decent for a hobby project and has nice Turborepo integrations.
  • Zapsplat.com: A royalty-free sound effects library.

Extension

The Whispering Chrome extension is built using:

  • Plasmo: A framework for building Chrome extensions. We use the relay flow to communicate to the Whispering website.
  • Effect-TS: To sprinkle some functional programming and write extremely type-safe functions, where errors are included in the return type of the function signature.
  • React: The UI reactivity library for the Chrome extension, as Plasmo unfortunately doesn't support Svelte 5.
  • ShadCN: The UI component library for the Chrome extension.
  • TailwindCSS: A utility-first CSS framework for rapidly building custom user interfaces.
  • Chrome API: The Chrome extension API.
  • Zapsplat.com: A royalty-free sound effects library.

Run Whispering in Local Development Mode

To set up the project on your local machine, follow these steps:

  1. Clone the repository: git clone https://github.com/braden-w/whispering.git
  2. Change into the project directory: cd whispering
  3. Install the necessary dependencies: pnpm i

To run the Whispering desktop app and website in development mode:

  1. Change into the app directory: cd apps/app
  2. Run the development server: pnpm tauri dev

The desktop app should automatically open for local development. To develop the web app, open your browser and navigate to http://localhost:5173.

To run the Whispering Chrome extension in development mode:

  1. Change into the extension directory: cd apps/extension
  2. Run the development server: pnpm dev --target=chrome-mv3

To develop the chrome extension, load it into Chrome by navigating to chrome://extensions, enabling developer mode, and loading the apps/extension/build/{platform}-{manifest-version}-dev folder as an unpacked extension.

Build The Executable Yourself

If you ever have concerns regarding the trustworthiness of the installers or would like more control, you can always build the executable yourself. This requires more setup, but it ensures that you are running the code you expect. Such is the beauty of open-source software!

Chrome

  1. Change into the extension directory: cd apps/extension
  2. Install the necessary dependencies: pnpm i
  3. Run Plasmo build: pnpm plasmo build --target=chrome-mv3
  4. Output should be found in apps/extension/build/chrome-mv3-prod, which can be loaded into Chrome as an unpacked extension.
  5. Alternatively, you can build the extension for the Chrome Web Store: pnpm plasmo build --target=chrome-mv3 --release

Firefox

  1. Change into the extension directory: cd apps/extension
  2. Install the necessary dependencies: pnpm i
  3. Run Plasmo build: pnpm plasmo build --target=firefox-mv3
  4. Output should be found in apps/extension/build/firefox-mv3-prod, which can be loaded into Chrome as an unpacked extension.
  5. Alternatively, you can build the extension for the Chrome Web Store: pnpm plasmo build --target=firefox-mv3 --release

Desktop

  1. Change into the app directory: cd apps/app
  2. Install the necessary dependencies: pnpm i
  3. Run Tauri Build: pnpm tauri build
  4. You can find the executable in the apps/app/target/release directory.

Contributing

We welcome contributions from the community! If you'd like to contribute to Whispering, please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix: git checkout -b feature/your-feature-name or git checkout -b fix/your-bugfix-name
  3. Make your changes and commit them with a descriptive message.
  4. Push your branch to your forked repository: git push origin your-branch-name
  5. Create a pull request from your forked repository to the original one.

Please ensure your code follows established conventions and is well-documented.

License

Whispering is released under the MIT License.

Sponsors

This project is supported by the following amazing people and organizations:

Chris BurgessMax Ziebell

Support and Feedback

If you encounter any issues or have suggestions for improvements, please open an issue on the GitHub issues tab or contact me via [email protected]. I really appreciate your feedback!

Thank you for using Whispering and happy writing!

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes