Skip to content

MinFin-NL/stmc

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Streamlit Real-time Transcription Component

This project is a custom Streamlit component that captures audio from the user's browser (microphone) and streams it to a server via WebSockets for real-time transcription using Azure Speech Service.

Project Structure

  • main.py: The main Streamlit application and WebSocket server.
  • my_component/: The custom Streamlit component.
    • __init__.py: Python wrapper for the component.
    • frontend/: React-based frontend for audio capture and WebSocket streaming.
  • requirements.txt: Python dependencies.

Prerequisites

  • Python 3.8+
  • Node.js and npm (for building the frontend)
  • Azure Speech Service subscription (Key and Region)

Installation

  1. Clone the repository (if applicable) or navigate to the project directory.

  2. Install Python dependencies:

    pip install -r requirements.txt
  3. Install Frontend dependencies:

    cd my_component/frontend
    npm install
    cd ../..

Configuration

Set your Azure Speech Service credentials as environment variables:

export AZURE_SPEECH_KEY="your_azure_speech_key"
export AZURE_SPEECH_REGION="your_azure_speech_region"

Alternatively, you can edit main.py and replace the placeholder values in the AZURE_SPEECH_KEY and AZURE_SPEECH_REGION variables.

Running the Application

Development Mode

In development mode, the Streamlit component connects to a React development server for faster iterations.

  1. Start the Frontend development server:

    cd my_component/frontend
    npm start

    This will run the frontend on http://localhost:3001.

  2. Run the Streamlit application (in a new terminal):

    streamlit run main.py

Production Mode

In production mode, the component serves the pre-built static files. The application automatically detects production mode if the my_component/frontend/build directory exists.

  1. Build the Frontend:

    cd my_component/frontend
    npm run build
    cd ../..
  2. Run the Streamlit application:

    streamlit run main.py

Local Installation via Pip

You can install this component as a local Python package. This makes it available in your current Python environment and allows you to import it in other Streamlit scripts.

  1. Build the Frontend (if not already built):

    cd my_component/frontend
    npm install
    npm run build
    cd ../..
  2. Install in your current environment:

    pip install .

Using in Other Virtual Environments

If you have other projects with their own virtual environments, you have two main options:

Option 1: Install from the local path (Recommended)

You can install the package directly into any other virtual environment by pointing to this directory. Activate your other project's environment and run:

pip install /path/to/this/stmc/folder

Option 2: Build and install a Wheel file

You can create a distribution file (wheel) that can be moved and installed anywhere:

  1. Create the wheel:
    pip install build
    python -m build
  2. Install the wheel elsewhere:
    # In your other project/environment:
    pip install /path/to/stmc/dist/stmc-0.1.0-py3-none-any.whl

Option 3: Global Installation (Use with caution)

If you want it available without activating any virtual environment (globally on your PC), deactivate your virtual environment and run:

pip install .

Note: It is generally recommended to use virtual environments (Options 1 or 2) to avoid dependency conflicts.

Usage in Other Projects

Option 1: Install via Pip (Recommended)

If you have installed the component using pip install . as described above, you can simply import it in any Streamlit app:

import streamlit as st
from my_component import my_component

# In your Streamlit app
websocket_url = "ws://localhost:9988"
transcription = my_component(websocket_url=websocket_url)

if transcription:
    st.write(f"Transcription: {transcription}")

Option 2: Manual Copy

To use this component manually in your own Streamlit project:

  1. Copy the component: Copy the my_component/ directory into your project's root.
  2. Install dependencies:
    • Add streamlit, websockets, and azure-cognitiveservices-speech to your requirements.txt.
    • Ensure you have the frontend built (see Production Mode).
  3. Backend Implementation: Your Streamlit app needs to run a WebSocket server to handle the audio stream. You can adapt the server logic from main.py.

Deployment

To deploy this application:

  1. Build the frontend as described in the Production Mode section.
  2. Ensure all dependencies from requirements.txt are installed on the server.
  3. Configure Environment Variables: Set AZURE_SPEECH_KEY and AZURE_SPEECH_REGION on your deployment platform (e.g., Streamlit Cloud, Heroku, Azure App Service).
  4. WebSocket Port: The application currently uses port 8888 for WebSockets on localhost. For production deployment, you might need to:
    • Update the WebSocket server host and port in main.py.
    • Update the websocket_url in main.py to point to your production server's address.
    • Ensure your hosting provider supports WebSockets and the specified port is open.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • Python 48.9%
  • TypeScript 46.9%
  • HTML 4.2%