Spaces:

moustafa1-1
/

TTS3

Runtime error

App Files Files Community

Moustafa1111111111 commited on May 7

Commit

1d5d75a

1 Parent(s): fb28d52

create TTS

Browse files

Files changed (16) hide show

.gitattributes +1 -0
.gitignore +8 -0
.gitmodules +3 -0
Dockerfile +65 -0
README.md +5 -4
index.html +19 -0
local_server_new.py +136 -0
requirements.txt +140 -0
runtime.txt +1 -0
script.js +38 -0
speaker_reference.wav +3 -0
start.sh +13 -0
style.css +76 -0
web/index.html +19 -0
web/script.js +38 -0
web/style.css +76 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+speaker_reference.wav filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+TTS/**/*.wav
+TTS/**/*.png
+TTS/**/*.gif
+TTS/**/*.exe
+TTS/new_venv1/
+__pycache__/
+*.pyc
+*.log

.gitmodules ADDED Viewed

	@@ -0,0 +1,3 @@

+[submodule "TTS"]
+	path = TTS
+	url = https://github.com/coqui-ai/TTS.git

Dockerfile ADDED Viewed

	@@ -0,0 +1,65 @@

+FROM python:3.9-slim-buster
+# Install Git (if not already included - might be needed for other parts of your repo)
+RUN apt-get update && apt-get install -y git
+# Set the working directory in the container
+WORKDIR /app
+# Copy your entire repository content (excluding the potentially problematic TTS submodule)
+COPY . /app/
+# Install build tools and other dependencies that might be needed by TTS or other parts of your app
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    cmake \
+    pkg-config \
+    libblis-dev \
+    python3-venv \
+    python3-dev \
+    wget \
+    libopenblas-dev
+# Create a virtual environment
+RUN python3 -m venv venv
+RUN . /app/venv/bin/activate
+# Copy the requirements.txt file
+COPY requirements.txt /app/
+# Install all dependencies, including TTS, from the requirements.txt
+RUN pip install --no-cache-dir -r /app/requirements.txt --timeout=300
+# Create the model directory
+RUN mkdir -p /app/models/xtts_v2
+# Download XTTS v2 model files
+RUN wget -O /app/models/xtts_v2/config.json https://huggingface.co/coqui/XTTS-v2/resolve/main/config.json?download=true
+RUN wget -O /app/models/xtts_v2/model.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/model.pth?download=true
+RUN wget -O /app/models/xtts_v2/vocab.json https://huggingface.co/coqui/XTTS-v2/resolve/main/vocab.json?download=true
+RUN wget -O /app/models/xtts_v2/dvae.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/dvae.pth?download=true
+RUN wget -O /app/models/xtts_v2/speakers_xtts.pth https://huggingface.co/coqui/XTTS-v2/resolve/main/speakers_xtts.pth?download=true
+# Create the audio directory if it doesn't exist
+RUN mkdir -p /app/audio
+# Copy the speaker_reference.wav file if it exists at the root
+COPY speaker_reference.wav /app/audio/speaker_reference.wav
+# Copy the web page files
+COPY web /app/web
+# Copy the application code
+COPY local_server_new.py /app/
+# Create start.sh script
+RUN echo "#!/bin/bash" > start.sh && \
+    echo "source /app/venv/bin/activate" >> start.sh && \
+    echo "/app/venv/bin/python -m uvicorn local_server_new:app --host 0.0.0.0 --port 80" >> start.sh && \
+    chmod +x start.sh
+# Expose port
+EXPOSE 80
+# Run the app using the script
+CMD ["./start.sh"]

README.md CHANGED Viewed

@@ -1,11 +1,12 @@
 ---
-title: TTS3
-emoji: 📈
-colorFrom: purple
-colorTo: pink
 sdk: docker
 pinned: false
 license: apache-2.0
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TTS
+emoji: 😻
+colorFrom: pink
+colorTo: purple
 sdk: docker
 pinned: false
 license: apache-2.0
+short_description: XTTS Large Language Model
 ---
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html ADDED Viewed

	@@ -0,0 +1,19 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Text to Speech</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Text to Speech</h1>
+    <textarea id="inputText" rows="5" cols="50"></textarea><br><br>
+    <button id="convertButton">Convert to Speech</button>
+    <div id="status"></div>
+    <div id="audioOutput" style="margin-top: 20px;">
+        <a id="downloadLink" href="#" download="output.wav" style="display: none;">Download Audio</a>
+        <audio id="audioPlayer" controls style="display: none;"></audio>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

local_server_new.py ADDED Viewed

	@@ -0,0 +1,136 @@

+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+import logging
+import torch
+import os
+from TTS.api import TTS
+from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
+from langdetect import detect
+# Allowlist XttsConfig so torch.load doesn't raise UnpicklingError
+from torch.serialization import add_safe_globals
+from TTS.tts.configs.xtts_config import XttsConfig
+add_safe_globals([XttsConfig])
+# ✅ Monkey-patch torch.load to always use weights_only=False
+_original_torch_load = torch.load
+def patched_torch_load(*args, **kwargs):
+    kwargs["weights_only"] = False
+    return _original_torch_load(*args, **kwargs)
+torch.load = patched_torch_load
+logging.basicConfig(level=logging.DEBUG)
+# Initialize FastAPI
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# Load TTS model from local files
+try:
+    model_dir = "/app/models/xtts_v2"
+    config_path = os.path.join(model_dir, "config.json")
+    # When providing config_path, TTS might expect the directory for model_path
+    tts = TTS(model_path=model_dir, config_path=config_path).to("cuda" if torch.cuda.is_available() else "cpu")
+    print("XTTS v2 model loaded successfully from local files.")
+except Exception as e:
+    print(f"Error loading XTTS v2 model from local files: {e}")
+    print("Falling back to loading by model name (license might be required).")
+    tts = TTS("tts_models/multilingual/multi-dataset-xtts_v2").to("cuda" if torch.cuda.is_available() else "cpu")
+# Load sentiment models
+arabic_model_name = "aubmindlab/bert-base-arabertv02-twitter"
+sentiment_tokenizer = AutoTokenizer.from_pretrained(arabic_model_name)
+sentiment_model = AutoModelForSequenceClassification.from_pretrained("UBC-NLP/MARBERT")
+sentiment_analyzer = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
+# Input class for POST body
+class Message(BaseModel):
+    text: str
+# Language detection
+def detect_language_safely(text):
+    try:
+        if any('\u0600' <= c <= '\u06FF' for c in text):
+            return "ar"
+        return detect(text)
+    except:
+        return "ar" if any('\u0600' <= c <= '\u06FF' for c in text) else "en"
+# Sentiment to emotion mapping
+def map_sentiment_to_emotion(sentiment, language="en"):
+    if language == "ar":
+        return "happy" if sentiment == "positive" else "sad" if sentiment == "negative" else "neutral"
+    return "happy" if "positive" in sentiment.lower() else "sad" if "negative" in sentiment.lower() else "neutral"
+# Simple Arabic sentiment analysis
+def arabic_sentiment_analysis(text):
+    pos_words = ["سعيد", "فرح", "ممتاز", "رائع", "جيد", "حب", "جميل", "نجاح", "أحسنت", "شكرا"]
+    neg_words = ["حزين", "غاضب", "سيء", "فشل", "خطأ", "مشكلة", "صعب", "لا أحب", "سخيف", "مؤسف"]
+    pos_count = sum(1 for word in pos_words if word in text.lower())
+    neg_count = sum(1 for word in neg_words if word in text.lower())
+    if pos_count > neg_count:
+        return "positive"
+    elif neg_count > pos_count:
+        return "negative"
+    else:
+        try:
+            inputs = sentiment_tokenizer(text, return_tensors="pt", truncation=True, padding=True, max_length=128)
+            outputs = sentiment_model(**inputs)
+            sentiment_class = torch.argmax(outputs.logits).item()
+            return ["negative", "neutral", "positive"][sentiment_class]
+        except:
+            return "neutral"
+# Main TTS endpoint
+@app.post("/text-to-speech/")
+def text_to_speech(msg: Message):
+    text = msg.text
+    language = detect_language_safely(text)
+    emotion = "neutral"
+    if language == "en":
+        try:
+            sentiment_result = sentiment_analyzer(text)[0]
+            emotion = map_sentiment_to_emotion(sentiment_result["label"])
+        except:
+            pass
+    else:
+        try:
+            sentiment_result = arabic_sentiment_analysis(text)
+            emotion = map_sentiment_to_emotion(sentiment_result, language="ar")
+        except:
+            pass
+    output_filename = "output.wav"
+    try:
+        tts.tts_to_file(
+            text=text,
+            file_path=output_filename,
+            emotion=emotion,
+            speaker_wav="/app/audio/speaker_reference.wav", # Updated path
+            language=language
+        )
+        return {
+            "status": "success",
+            "audio_file": output_filename,
+            "url": "/audio"
+        }
+    except Exception as e:
+        return {"status": "error", "message": str(e)}
+# ✅ Serve the audio file
+@app.get("/audio")
+def get_audio():
+    return FileResponse("output.wav", media_type="audio/wav", filename="output.wav")
+# Serve static files (your web page) from the 'web' directory
+app.mount("/", StaticFiles(directory="web", html=True), name="static")

requirements.txt ADDED Viewed

	@@ -0,0 +1,140 @@

+TTS==0.22.0
+numpy==1.22.0
+transformers==4.51.3
+torch==2.7.0
+torchaudio==2.7.0
+scipy==1.11.4  # Or >=1.11.2 as specified during install
+numba==0.60.0
+soundfile==0.13.1
+pypinyin==0.54.0
+flask==3.1.0
+bangla==0.0.5
+scikit-learn==1.6.1  # Or >=1.3.0
+fsspec==2025.3.2  # Or >=2023.6.0
+umap-learn==0.5.7  # Or >=0.5.1
+gruut[de,es,fr]==2.2.3
+nltk==3.9.1
+einops==0.8.1  # Or >=0.6.0
+num2words==0.5.14
+pandas==1.5.3  # Or <2.0,>=1.4
+trainer==0.0.36  # Or >=0.0.32
+coqpit==0.0.17  # Or >=0.0.16
+unidecode==1.4.0  # Or >=1.3.2
+pysbd==0.3.4  # Or >=0.3.4
+inflect==7.5.0  # Or >=5.6.0
+bnunicodenormalizer==0.1.7
+anyascii==0.3.2  # Or >=0.3.0
+packaging==25.0  # Or >=23.1
+librosa==0.10.0  # Or >=0.10.0 (multiple versions might have been tried)
+matplotlib==3.8.4 # Or >=3.7.0 (multiple versions might have been tried)
+tqdm==4.67.1  # Or >=4.64.1
+encodec==0.1.1
+pyyaml==6.0.2  # Or >=6.0
+jieba==0.42.1
+hangul-romanize==0.1.0
+jamo==0.4.1
+bnnumerizer==0.0.2
+aiohttp==3.11.18  # Or >=3.8.1
+spacy[ja]==3.8.5  # Or >=3
+Babel==2.17.0  # Or <3.0.0,>=2.8.0
+jsonlines==1.2.0  # Or ~=1.2.0
+dateparser==1.1.8  # Or ~=1.1.0
+gruut-lang-en==2.0.1  # Or ~=2.0.0
+python-crfsuite==0.9.11  # Or ~=0.9.7
+networkx==2.8.8  # Or <3.0.0,>=2.5.0
+gruut-ipa==0.13.0  # Or <1.0,>=0.12.0
+gruut-lang-es==2.0.1  # Or ~=2.0.0
+gruut-lang-fr==2.0.2  # Or ~=2.0.0
+gruut-lang-de==2.0.1  # Or ~=2.0.0
+attrs==25.3.0  # Or >=17.3.0
+aiohappyeyeballs==2.6.1  # Or >=2.3.0
+aiosignal==1.3.2  # Or >=1.1.2
+propcache==0.3.1  # Or >=0.2.0
+async-timeout==5.0.1  # Or <6.0,>=4.0
+frozenlist==1.6.0  # Or >=1.1.1
+multidict==6.4.3  # Or <7.0,>=4.5
+yarl==1.20.0  # Or <2.0,>=1.17.0
+Werkzeug==3.1.3  # Or >=3.1
+blinker==1.9.0  # Or >=1.9
+click==8.1.8  # Or >=8.1.3
+Jinja2==3.1.6  # Or >=3.1.2
+importlib-metadata==8.7.0  # Or >=3.6
+itsdangerous==2.2.0  # Or >=2.2
+more-itertools==10.7.0  # Or >=8.5.0
+typeguard==4.4.2  # Or >=4.0.1
+typing-extensions==4.13.2  # Or >=4.1.1
+joblib==1.5.0  # Or >=0.14
+decorator==5.2.1  # Or >=4.3.0
+pooch==1.8.2  # Or >=1.1
+lazy-loader==0.4  # Or >=0.1
+msgpack==1.1.0  # Or >=1.0
+soxr==0.5.0.post1  # Or >=0.3.2
+pyparsing==3.2.3  # Or >=2.3.1
+fonttools==4.57.0  # Or >=4.22.0
+cycler==0.12.1  # Or >=0.10
+python-dateutil==2.9.0.post0  # Or >=2.7
+contourpy==1.2.1  # Or >=1.0.1 (multiple versions might have been tried)
+importlib-resources==6.5.2  # Or >=3.2.0
+pillow==11.2.1  # Or >=8
+kiwisolver==1.4.7  # Or >=1.3.1
+llvmlite==0.43.0  # Or <0.44,>=0.43.0dev0
+pytz==2025.2  # Or >=2020.1
+threadpoolctl==3.6.0  # Or >=3.1.0
+cffi==1.17.1  # Or >=1.0
+typer==0.15.3  # Or <1.0.0,>=0.3.0
+requests==2.32.3  # Or <3.0.0,>=2.13.0
+cymem==2.0.11  # Or <2.1.0,>=2.0.2
+srsly==2.5.1  # Or <3.0.0,>=2.4.3
+pydantic==2.11.4  # Or !=1.8,!=1.8.1,<3.0.0,>=1.7.4
+murmurhash==1.0.12  # Or <1.1.0,>=0.28.0
+catalogue==2.0.10  # Or <2.1.0,>=2.0.6
+wasabi==1.1.3  # Or <1.2.0,>=0.9.1
+weasel==0.4.1  # Or <0.5.0,>=0.1.0
+spacy-legacy==3.0.12  # Or <3.1.0,>=3.0.11
+langcodes==3.5.0  # Or <4.0.0,>=3.2.0
+spacy-loggers==1.0.5  # Or <2.0.0,>=1.0.0
+thinc==8.3.4  # Or <8.4.0,>=8.3.4 (multiple versions might have been tried)
+preshed==3.0.9  # Or <3.1.0,>=3.0.2
+sudachidict-core==20250129  # Or >=20211220
+sudachipy==0.6.10  # Or !=0.6.1,>=0.5.2
+filelock==3.18.0
+sympy==1.14.0  # Or >=1.13.3
+colorama==0.4.6
+tensorboard==2.19.0
+psutil==7.0.0
+safetensors==0.5.3  # Or >=0.4.3
+tokenizers==0.21.1  # Or <0.22,>=0.21
+regex==2024.11.6  # Or !=2019.12.17
+huggingface-hub==0.31.1  # Or <1.0,>=0.30.0
+pynndescent==0.5.13  # Or >=0.5
+pycparser==2.22
+tzlocal==5.3.1
+zipp==3.21.0
+MarkupSafe==3.0.2  # Or >=2.0
+six==1.17.0
+language-data==1.3.0  # Or >=1.2
+platformdirs==4.3.7  # Or >=2.5.0
+annotated-types==0.7.0  # Or >=0.6.0
+typing-inspection==0.4.0  # Or >=0.4.0
+pydantic-core==2.33.2
+urllib3==2.4.0  # Or <3,>=1.21.1
+idna==3.10  # Or <4,>=2.5
+charset-normalizer==3.4.2  # Or <4,>=2
+certifi==2025.4.26  # Or >=2017.4.17
+mpmath==1.3.0  # Or <1.4,>=1.1.0
+confection==0.1.5  # Or <1.0.0,>=0.0.1
+shellingham==1.5.4  # Or >=1.3.0
+rich==14.0.0  # Or >=10.11.0
+smart-open==7.1.0  # Or <8.0.0,>=5.2.1
+cloudpathlib==0.21.0  # Or <1.0.0,>=0.7.0
+markdown==3.8  # Or >=2.6.8
+protobuf==6.30.2  # Or !=4.24.0,>=3.19.6
+tensorboard-data-server==0.7.2  # Or <0.8.0,>=0.7.0
+grpcio==1.71.0  # Or >=1.48.2
+absl-py==2.2.2  # Or >=0.4
+marisa-trie==1.2.1  # Or >=1.1.0
+pygments==2.19.1  # Or <3.0.0,>=2.13.0
+markdown-it-py==3.0.0  # Or >=2.2.0
+wrapt==1.17.2
+tzdata==2025.2
+mdurl==0.1.2  # Or ~=0.1

runtime.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ python-3.9

script.js ADDED Viewed

	@@ -0,0 +1,38 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const convertButton = document.getElementById('convertButton');
+    const inputText = document.getElementById('inputText');
+    const statusDiv = document.getElementById('status');
+    const downloadLink = document.getElementById('downloadLink');
+    const audioPlayer = document.getElementById('audioPlayer');
+    convertButton.addEventListener('click', async () => {
+        const text = inputText.value;
+        statusDiv.textContent = 'Processing...';
+        downloadLink.style.display = 'none';
+        audioPlayer.style.display = 'none';
+        try {
+            const response = await fetch('http://localhost:5000/text-to-speech/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: text }),
+            });
+            const data = await response.json();
+            if (data.status === 'success') {
+                statusDiv.textContent = 'Speech generated successfully!';
+                downloadLink.href = 'http://localhost:5000' + data.url;
+                downloadLink.style.display = 'block';
+                audioPlayer.src = 'http://localhost:5000' + data.url;
+                audioPlayer.style.display = 'block';
+            } else {
+                statusDiv.textContent = `Error: ${data.message}`;
+            }
+        } catch (error) {
+            statusDiv.textContent = `Network error: ${error}`;
+        }
+    });
+});

speaker_reference.wav ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:e7fa2e3b58516ba6057ab93fa819eca83097c31a90d24e53cc6593ef384ce1f1
+size 188476

start.sh ADDED Viewed

	@@ -0,0 +1,13 @@

+#!/bin/bash
+# 1. Navigate to the application directory (where local_server_new.py is)
+cd /app
+# 2. Activate the Python virtual environment
+source venv/bin/activate
+# 3. Run the FastAPI application using Uvicorn
+#    - Bind to all interfaces (0.0.0.0)
+#    - Listen on port 80 (required by Hugging Face Spaces for HTTP)
+#    - Specify your FastAPI application module and app instance (local_server_new:app)
+uvicorn local_server_new:app --host 0.0.0.0 --port 80

style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7f6;
+    margin: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+h1 {
+    color: #2c3e50;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 2.5em;
+}
+textarea {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1em;
+    margin-bottom: 20px;
+    width: 80%;
+    max-width: 600px;
+    box-sizing: border-box;
+    resize: vertical; /* Allows vertical resizing */
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+button {
+    background-color: #3498db;
+    color: white;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+button:hover {
+    background-color: #2980b9;
+}
+#status {
+    margin-top: 20px;
+    font-weight: bold;
+    color: #27ae60; /* Green for success, you can change for errors */
+}
+#audioOutput {
+    margin-top: 30px;
+    text-align: center;
+}
+#downloadLink {
+    display: inline-block;
+    background-color: #2ecc71;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+#downloadLink:hover {
+    background-color: #27ae60;
+}
+#audioPlayer {
+    margin-top: 10px;
+}

web/index.html ADDED Viewed

	@@ -0,0 +1,19 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Text to Speech</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Text to Speech</h1>
+    <textarea id="inputText" rows="5" cols="50"></textarea><br><br>
+    <button id="convertButton">Convert to Speech</button>
+    <div id="status"></div>
+    <div id="audioOutput" style="margin-top: 20px;">
+        <a id="downloadLink" href="#" download="output.wav" style="display: none;">Download Audio</a>
+        <audio id="audioPlayer" controls style="display: none;"></audio>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

web/script.js ADDED Viewed

	@@ -0,0 +1,38 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const convertButton = document.getElementById('convertButton');
+    const inputText = document.getElementById('inputText');
+    const statusDiv = document.getElementById('status');
+    const downloadLink = document.getElementById('downloadLink');
+    const audioPlayer = document.getElementById('audioPlayer');
+    convertButton.addEventListener('click', async () => {
+        const text = inputText.value;
+        statusDiv.textContent = 'Processing...';
+        downloadLink.style.display = 'none';
+        audioPlayer.style.display = 'none';
+        try {
+            const response = await fetch('http://localhost:5000/text-to-speech/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ text: text }),
+            });
+            const data = await response.json();
+            if (data.status === 'success') {
+                statusDiv.textContent = 'Speech generated successfully!';
+                downloadLink.href = 'http://localhost:5000' + data.url;
+                downloadLink.style.display = 'block';
+                audioPlayer.src = 'http://localhost:5000' + data.url;
+                audioPlayer.style.display = 'block';
+            } else {
+                statusDiv.textContent = `Error: ${data.message}`;
+            }
+        } catch (error) {
+            statusDiv.textContent = `Network error: ${error}`;
+        }
+    });
+});

web/style.css ADDED Viewed

	@@ -0,0 +1,76 @@

+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f4f7f6;
+    margin: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+h1 {
+    color: #2c3e50;
+    margin-bottom: 30px;
+    text-align: center;
+    font-size: 2.5em;
+}
+textarea {
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 1em;
+    margin-bottom: 20px;
+    width: 80%;
+    max-width: 600px;
+    box-sizing: border-box;
+    resize: vertical; /* Allows vertical resizing */
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+button {
+    background-color: #3498db;
+    color: white;
+    padding: 12px 25px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1.1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+button:hover {
+    background-color: #2980b9;
+}
+#status {
+    margin-top: 20px;
+    font-weight: bold;
+    color: #27ae60; /* Green for success, you can change for errors */
+}
+#audioOutput {
+    margin-top: 30px;
+    text-align: center;
+}
+#downloadLink {
+    display: inline-block;
+    background-color: #2ecc71;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
+}
+#downloadLink:hover {
+    background-color: #27ae60;
+}
+#audioPlayer {
+    margin-top: 10px;
+}