Update UI access with environment URL and PORT

README.md

@@ -38,6 +38,10 @@ The service can be accessed through either the API endpoints or the Gradio web i
         docker compose up --build 
         ```
 
+      Once started:
+     - The API will be available at http://localhost:8880
+     - The UI can be accessed at http://localhost:7860
+
   __Or__ running the API alone using Docker (model + voice packs baked in) (Most Recent):
 
   ```bash
@@ -46,7 +50,7 @@ The service can be accessed through either the API endpoints or the Gradio web i
   ```
 
 
-2. Run locally as an OpenAI-Compatible Speech Endpoint
+4. Run locally as an OpenAI-Compatible Speech Endpoint
     ```python
     from openai import OpenAI
     client = OpenAI(
@@ -181,8 +185,19 @@ If you only want the API, just comment out everything in the docker-compose.yml
 
 Currently, voices created via the API are accessible here, but voice combination/creation has not yet been added
 
-*Note: Recent updates for streaming could lead to temporary glitches. If so, pull from the most recent stable release v0.0.2 to restore*
-
+Running the UI Docker Service
+   - If you only want to run the Gradio web interface separately and connect it to an existing API service:
+      ```bash
+      docker run -p 7860:7860 \
+        -e API_HOST=<api-hostname-or-ip> \
+        -e API_PORT=8880 \
+        ghcr.io/remsky/kokoro-fastapi-ui:v0.1.0
+      ```
+
+     - Replace `<api-hostname-or-ip>` with:
+       - `kokoro-tts` if the UI container is running in the same Docker Compose setup.
+       - `localhost` if the API is running on your local machine.
+
 ### Disabling Local Saving
 
 You can disable local saving of audio files and hide the file view in the UI by setting the `DISABLE_LOCAL_SAVING` environment variable to `true`. This is useful when running the service on a server where you don't want to store generated audio files locally.

docker/cpu/docker-compose.yml

@@ -35,3 +35,5 @@ services:
       - GRADIO_WATCH=True  # Enable hot reloading
       - PYTHONUNBUFFERED=1  # Ensure Python output is not buffered
       - DISABLE_LOCAL_SAVING=false  # Set to 'true' to disable local saving and hide file view
+      - API_HOST=kokoro-tts  # Set TTS service URL
+      - API_PORT=8880  # Set TTS service PORT

docker/gpu/docker-compose.yml

@@ -35,3 +35,5 @@ services:
       - GRADIO_WATCH=1  # Enable hot reloading
       - PYTHONUNBUFFERED=1  # Ensure Python output is not buffered
       - DISABLE_LOCAL_SAVING=false  # Set to 'true' to disable local saving and hide file view
+      - API_HOST=kokoro-tts  # Set TTS service URL
+      - API_PORT=8880  # Set TTS service PORT

ui/Dockerfile

@@ -11,5 +11,8 @@ RUN mkdir -p data/inputs data/outputs
 # Copy the application files
 COPY . .
 
+ENV API_HOST=kokoro-tts
+ENV API_PORT=8880
+
 # Run the Gradio app
 CMD ["python", "app.py"]

ui/lib/config.py

@@ -1,7 +1,9 @@
 import os
 
 # API Configuration
-API_URL = "http://kokoro-tts:8880"
+API_HOST = os.getenv("API_HOST", "kokoro-tts")
+API_PORT = os.getenv("API_PORT", "8880")
+API_URL = f"http://{API_HOST}:{API_PORT}"
 
 # File paths
 INPUTS_DIR = "/app/ui/data/inputs"