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.
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.
- Python 3.8+
- Node.js and npm (for building the frontend)
- Azure Speech Service subscription (Key and Region)
-
Clone the repository (if applicable) or navigate to the project directory.
-
Install Python dependencies:
pip install -r requirements.txt
-
Install Frontend dependencies:
cd my_component/frontend npm install cd ../..
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.
In development mode, the Streamlit component connects to a React development server for faster iterations.
-
Start the Frontend development server:
cd my_component/frontend npm startThis will run the frontend on
http://localhost:3001. -
Run the Streamlit application (in a new terminal):
streamlit run main.py
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.
-
Build the Frontend:
cd my_component/frontend npm run build cd ../..
-
Run the Streamlit application:
streamlit run main.py
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.
-
Build the Frontend (if not already built):
cd my_component/frontend npm install npm run build cd ../..
-
Install in your current environment:
pip install .
If you have other projects with their own virtual environments, you have two main options:
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/folderYou can create a distribution file (wheel) that can be moved and installed anywhere:
- Create the wheel:
pip install build python -m build
- Install the wheel elsewhere:
# In your other project/environment: pip install /path/to/stmc/dist/stmc-0.1.0-py3-none-any.whl
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.
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}")To use this component manually in your own Streamlit project:
- Copy the component: Copy the
my_component/directory into your project's root. - Install dependencies:
- Add
streamlit,websockets, andazure-cognitiveservices-speechto yourrequirements.txt. - Ensure you have the frontend built (see Production Mode).
- Add
- 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.
To deploy this application:
- Build the frontend as described in the Production Mode section.
- Ensure all dependencies from
requirements.txtare installed on the server. - Configure Environment Variables: Set
AZURE_SPEECH_KEYandAZURE_SPEECH_REGIONon your deployment platform (e.g., Streamlit Cloud, Heroku, Azure App Service). - WebSocket Port: The application currently uses port
8888for WebSockets onlocalhost. For production deployment, you might need to:- Update the WebSocket server host and port in
main.py. - Update the
websocket_urlinmain.pyto point to your production server's address. - Ensure your hosting provider supports WebSockets and the specified port is open.
- Update the WebSocket server host and port in