import gradio as gr

import requests

# Endpoints ثابتة
AZURE_CHAT_ENDPOINT = "https://lahja-dev-resource.cognitiveservices.azure.com/openai/deployments/gpt-4o/chat/completions?api-version=2025-01-01-preview"
AZURE_TTS_ENDPOINT = "https://lahja-dev-resource.cognitiveservices.azure.com/openai/deployments/LAHJA-V1/audio/speech?api-version=2025-03-01-preview"


# --- GPT رد ---
def chat_with_gpt(text, api_key):
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
# system prompt لتعريف الشخصية
messages = [
{
"role": "system",
"content": (
"انت مساعد ذكي اسمه (لهجة)، مطور من قبل شركة (أسس الذكاء الرقمي). "
"رد دايمًا باللهجة النجدية السعودية. "
"خلك مختصر وواضح."
)
},
{"role": "user", "content": text}
]
data = {
"messages": messages,
"max_tokens": 512,
"temperature": 0.8,
"top_p": 1,
"model": "gpt-4o"
}
response = requests.post(AZURE_CHAT_ENDPOINT, json=data, headers=headers)
if response.status_code == 200:
return response.json()["choices"][0]["message"]["content"]
else:
return f"Error: {response.status_code}\n{response.text}"


# --- تحويل نص لصوت ---
def text_to_speech(text, voice, speed, filename, api_key):
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
data = {
"model": "LAHJA-V1",
"input": text,
"voice": voice,
"speed": speed
}
response = requests.post(AZURE_TTS_ENDPOINT, json=data, headers=headers)
if response.status_code == 200:
with open(filename, "wb") as f:
f.write(response.content)
return filename
else:
return None


# --- دالة رئيسية ---
def chat_and_speak(user_input, voice, speed, history, api_key):
reply = chat_with_gpt(user_input, api_key)

# صوت السؤال
q_audio = text_to_speech(user_input, voice, speed, "question.wav", api_key)
# صوت الجواب
a_audio = text_to_speech(reply, voice, speed, "answer.wav", api_key)

# تحديث المحادثة
history = history + [(user_input, reply)]

return history, q_audio, a_audio


# --- التحقق من مفتاح الدخول ---
def check_key(user_key):
if user_key.strip() == "":
return gr.update(visible=True), gr.update(visible=False), None
else:
return gr.update(visible=False), gr.update(visible=True), user_key


# --- واجهة Gradio ---
with gr.Blocks(theme=gr.themes.Soft(), title="لهجة AI") as demo:
# -------- صفحة تسجيل الدخول --------
with gr.Group(visible=True) as login_page:
gr.Markdown(
"""
<div style="text-align:center; padding: 40px;">
<h1 style="color:#8B0000; font-size: 40px;">🔐 دخول إلى لهجة AI</h1>
<p style="font-size:18px; color:#444;">من فضلك أدخل مفتاح API للوصول إلى النظام</p>
</div>
""",
)
key_box = gr.Textbox(
placeholder="ادخل كود الدخول (API KEY)...",
label="API Key",
type="password"
)
login_btn = gr.Button("🚀 دخول", elem_id="login_btn")

api_key_state = gr.State()

# -------- صفحة المحادثة --------
with gr.Group(visible=False) as chat_page:
gr.Markdown(
"""
<div style="text-align:center; padding: 10px;">
<h1 style="color:#8B0000; font-size: 38px;">🤖 لهجة AI</h1>
<p style="font-size:18px; color:#333;">مطور من قبل شركة أسس الذكاء الرقمي | مساعد ذكي باللهجة النجدية</p>
</div>
"""
)

with gr.Row():
# عمود المحادثة
with gr.Column(scale=2):
chatbot = gr.Chatbot(label="المحادثة", height=450, bubble_full_width=False)
user_input = gr.Textbox(
placeholder="💬 اكتب سؤالك هنا...",
label="📌 نص المستخدم"
)
with gr.Row():
voice = gr.Dropdown(choices=["alloy"], value="alloy", label="🎙️ اختر الصوت")
speed = gr.Slider(minimum=0.5, maximum=2.0, value=1.0, step=0.1, label="⚡ سرعة الكلام")

send_btn = gr.Button("📤 أرسل", elem_classes="send-btn")

# عمود الصوت
with gr.Column(scale=1):
gr.Markdown("### 🔊 المخرجات الصوتية")
q_audio = gr.Audio(type="filepath", label="صوت السؤال")
a_audio = gr.Audio(type="filepath", label="صوت الجواب")

state = gr.State([])

send_btn.click(
fn=chat_and_speak,
inputs=[user_input, voice, speed, state, api_key_state],
outputs=[chatbot, q_audio, a_audio],
)

# -------- تحكم بظهور الصفحات --------
login_btn.click(
fn=check_key,
inputs=[key_box],
outputs=[login_page, chat_page, api_key_state],
)

demo.launch()

README.md

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📈
-colorFrom: pink
-colorTo: pink
+title: undefined
+colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

chat.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>لهجة AI - مساعد باللهجة النجدية</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
+        
+        body {
+            font-family: 'Tajawal', sans-serif;
+            background-color: #f8f4e8;
+        }
+        
+        .header-bg {
+            background: linear-gradient(135deg, #8B0000 0%, #A52A2A 100%);
+        }
+        
+        .chat-bubble {
+            border-radius: 20px 20px 5px 20px;
+            background-color: #f0f0f0;
+        }
+        
+        .user-bubble {
+            border-radius: 20px 20px 20px 5px;
+            background-color: #e3f2fd;
+        }
+        
+        .audio-player {
+            transition: all 0.3s ease;
+            background-color: #fff;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        
+        .audio-player:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+    </style>
+</head>
+<body>
+    <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="header-bg text-white py-6 shadow-lg">
+            <div class="container mx-auto px-4 text-center">
+                <div class="flex items-center justify-center space-x-3">
+                    <i class="fas fa-comments text-2xl"></i>
+                    <h1 class="text-2xl font-bold">لهجة AI</h1>
+                </div>
+                <p class="mt-2 text-sm opacity-90">
+                    مساعد ذكي باللهجة النجدية | مطور من قبل أسس الذكاء الرقمي
+                </p>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="max-w-4xl mx-auto">
+                <!-- Chat Container -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <!-- Chat Messages -->
+                    <div id="chatContainer" class="h-96 p-4 overflow-y-auto space-y-4">
+                        <!-- Messages will be added here dynamically -->
+                    </div>
+
+                    <!-- Input Section -->
+                    <div class="p-4 border-t border-gray-200 bg-gray-50">
+                        <div class="flex flex-col space-y-4">
+                            <textarea id="userInput" 
+                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-600 focus:border-red-600 outline-none transition duration-200 resize-none" 
+                                      placeholder="💬 اكتب رسالتك هنا..." 
+                                      rows="3"></textarea>
+                            
+                            <div class="flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0">
+                                <div class="flex items-center space-x-3">
+                                    <div class="flex items-center">
+                                        <label for="voiceSelect" class="ml-2 text-sm font-medium text-gray-700">الصوت:</label>
+                                        <select id="voiceSelect" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-red-600 focus:border-red-600 outline-none">
+                                            <option value="alloy">عادي</option>
+                                        </select>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <label for="speedSelect" class="ml-2 text-sm font-medium text-gray-700">السرعة:</label>
+                                        <select id="speedSelect" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:ring-red-600 focus:border-red-600 outline-none">
+                                            <option value="0.8">بطيئة</option>
+                                            <option value="1.0" selected>عادية</option>
+                                            <option value="1.2">سريعة</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                
+                                <button id="sendBtn" class="bg-red-700 hover:bg-red-800 text-white font-medium py-2 px-6 rounded-lg shadow transition duration-200 flex items-center">
+                                    <i class="fas fa-paper-plane mr-2"></i>
+                                    إرسال
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Audio Players -->
+                <div id="audioSection" class="hidden mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="audio-player p-4 rounded-xl">
+                        <h3 class="font-medium text-gray-800 mb-2">صوت السؤال</h3>
+                        <audio id="questionAudio" controls class="w-full"></audio>
+                    </div>
+                    <div class="audio-player p-4 rounded-xl">
+                        <h3 class="font-medium text-gray-800 mb-2">صوت الجواب</h3>
+                        <audio id="answerAudio" controls class="w-full"></audio>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-gray-100 py-4 border-t border-gray-200 mt-auto">
+            <div class="container mx-auto px-4 text-center">
+                <p class="text-gray-600 text-sm">
+                    &copy; 2025 لهجة AI. جميع الحقوق محفوظة لشركة أسس الذكاء الرقمي.
+                </p>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chatContainer');
+            const userInput = document.getElementById('userInput');
+            const sendBtn = document.getElementById('sendBtn');
+            const voiceSelect = document.getElementById('voiceSelect');
+            const speedSelect = document.getElementById('speedSelect');
+            const questionAudio = document.getElementById('questionAudio');
+            const answerAudio = document.getElementById('answerAudio');
+            const audioSection = document.getElementById('audioSection');
+
+            // Add message to chat
+            function addMessage(text, isUser) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `flex ${isUser ? 'justify-start' : 'justify-end'}`;
+                
+                const bubble = document.createElement('div');
+                bubble.className = isUser ? 'user-bubble p-4 max-w-xs md:max-w-md' : 'chat-bubble p-4 max-w-xs md:max-w-md';
+                bubble.textContent = text;
+                
+                messageDiv.appendChild(bubble);
+                chatContainer.appendChild(messageDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+
+            // Handle send button click
+            sendBtn.addEventListener('click', async function() {
+                const message = userInput.value.trim();
+                if (!message) return;
+
+                // Add user message
+                addMessage(message, true);
+                userInput.value = '';
+
+                // Show loading
+                const loadingDiv = document.createElement('div');
+                loadingDiv.className = 'flex justify-end';
+                const loadingBubble = document.createElement('div');
+                loadingBubble.className = 'chat-bubble p-4 max-w-xs';
+                loadingBubble.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري الرد...';
+                loadingDiv.appendChild(loadingBubble);
+                chatContainer.appendChild(loadingDiv);
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+
+                // Simulate API call (replace with actual API call)
+                setTimeout(() => {
+                    // Remove loading
+                    chatContainer.removeChild(loadingDiv);
+
+                    // Add bot response (simulated)
+                    const responses = [
+                        "وعليكم السلام، الحمدلله بخير وش اخبارك؟",
+                        "الله يسعدك، كل شي تمام الحين.",
+                        "ياهلا والله، وش الجديد عندك؟",
+                        "الحمدلله على كل حال، عندي اخبار حلوة اليوم."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    addMessage(randomResponse, false);
+
+                    // Show audio players (simulated)
+                    questionAudio.src = "https://example.com/question.mp3";
+                    answerAudio.src = "https://example.com/answer.mp3";
+                    audioSection.classList.remove('hidden');
+                }, 1500);
+            });
+
+            // Allow sending with Enter key
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendBtn.click();
+                }
+            });
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LAHJA AI - Advanced Text-to-Speech</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8fafc;
+        }
+        
+        .gradient-bg {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
+        }
+        
+        .textarea-shadow {
+            box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06);
+        }
+        
+        .waveform {
+            height: 60px;
+            background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
+            opacity: 0.7;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .waveform::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                90deg,
+                transparent,
+                rgba(255, 255, 255, 0.2),
+                transparent
+            );
+            animation: wave 1.5s linear infinite;
+        }
+        
+        @keyframes wave {
+            0% {
+                transform: translateX(-100%);
+            }
+            100% {
+                transform: translateX(100%);
+            }
+        }
+        
+        .audio-player {
+            transition: all 0.3s ease;
+        }
+        
+        .audio-player:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="gradient-bg text-white py-6 shadow-lg">
+            <div class="container mx-auto px-4">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i class="fas fa-wave-square text-2xl"></i>
+                        <h1 class="text-2xl font-bold">LAHJA AI</h1>
+                    </div>
+                    <div class="hidden md:flex items-center space-x-4">
+                        <span class="text-sm font-medium bg-white/20 px-3 py-1 rounded-full">VITS Architecture</span>
+                        <span class="text-sm font-medium bg-white/20 px-3 py-1 rounded-full">Transformers</span>
+                        <a href="chat.html" class="text-sm font-medium bg-white/20 px-3 py-1 rounded-full hover:bg-white/30 transition">Chat Assistant</a>
+                    </div>
+</div>
+                <p class="mt-2 text-sm opacity-80 max-w-2xl">
+                    Advanced AI-powered text-to-speech with accent-aware synthesis using cutting-edge VITS architecture and transformer models.
+                </p>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="max-w-4xl mx-auto">
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <!-- Input Section -->
+                    <div class="p-6 border-b border-gray-100">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Text Input</h2>
+                        <div class="relative">
+                            <textarea id="textInput"
+                                      class="w-full h-48 px-4 py-3 border border-gray-200 rounded-lg textarea-shadow focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200 resize-none"
+                                      placeholder="Enter the text you want to convert to speech...">السلام عليكم كيف الحال اخبارك علومك وش مسوي بالله  وش الجديد  </textarea>
+                            <div class="absolute bottom-3 right-3 flex items-center space-x-2">
+                                <span id="charCount" class="text-xs text-gray-500">0 characters</span>
+                                <button id="clearBtn" class="text-gray-400 hover:text-gray-600 transition">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="mt-6 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
+                            <div class="flex items-center space-x-4">
+                                <div class="flex items-center">
+                                    <label for="voiceSelect" class="mr-2 text-sm font-medium text-gray-700">Voice:</label>
+                                    <select id="voiceSelect" class="border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 outline-none">
+                                        <option value="SA2">Najdi Arabic Haba v2</option>
+
+                                        <option value="us">American English</option>
+                                        <option value="SA1">Najdi Arabic Haba v1</option>
+
+                                        <option value="SA3">Najdi Arabic AHmmed v1</option>
+                                    </select>
+                                </div>
+                                <div class="flex items-center">
+                                    <label for="speedSelect" class="mr-2 text-sm font-medium text-gray-700">Speed:</label>
+                                    <select id="speedSelect" class="border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 outline-none">
+                                        <option value="0.8">Slow</option>
+                                        <option value="1.0" selected>Normal</option>
+                                        <option value="1.2">Fast</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <button id="generateBtn" class="gradient-bg hover:opacity-90 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-200 flex items-center">
+                                <i class="fas fa-play-circle mr-2"></i>
+                                Generate Voice
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Output Section -->
+                    <div class="p-6">
+                        <h2 class="text-xl font-semibold text-gray-800 mb-4">Generated Audio</h2>
+
+                        <!-- Loading State -->
+                        <div id="loadingState" class="hidden">
+                            <div class="flex flex-col items-center justify-center py-8">
+                                <div class="waveform w-full rounded-lg mb-4"></div>
+                                <p class="text-gray-600 font-medium">Processing your request with LAHJA AI...</p>
+                                <p class="text-sm text-gray-500 mt-1">This may take a few moments</p>
+                            </div>
+                        </div>
+
+                        <!-- Audio Player -->
+                        <div id="audioPlayerContainer" class="hidden">
+                            <div class="audio-player bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-4 border border-gray-200">
+                                <div class="flex items-center justify-between mb-3">
+                                    <div class="flex items-center space-x-3">
+                                        <i class="fas fa-headphones text-indigo-600 text-xl"></i>
+                                        <div>
+                                            <h3 class="font-medium text-gray-800">Generated Speech</h3>
+                                            <p class="text-xs text-gray-500" id="audioInfo">American English • Normal speed</p>
+                                        </div>
+                                    </div>
+                                    <button id="downloadBtn" class="text-indigo-600 hover:text-indigo-800 transition">
+                                        <i class="fas fa-download"></i>
+                                    </button>
+                                </div>
+                                <audio id="audioPlayer" controls class="w-full"></audio>
+                            </div>
+                        </div>
+
+                        <!-- Empty State -->
+                        <div id="emptyState" class="flex flex-col items-center justify-center py-12 text-center">
+                            <i class="fas fa-comment-dots text-4xl text-gray-300 mb-4"></i>
+                            <h3 class="text-lg font-medium text-gray-700">No audio generated yet</h3>
+                            <p class="text-gray-500 max-w-md mt-1">Enter some text above and click "Generate Voice" to create your speech.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Features Section -->
+                <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                        <div class="text-indigo-600 mb-3">
+                            <i class="fas fa-microchip text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">VITS Architecture</h3>
+                        <p class="text-gray-600 text-sm">
+                            Our advanced VITS model synthesizes realistic audio waveforms directly from text with exceptional clarity and naturalness.
+                        </p>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                        <div class="text-purple-600 mb-3">
+                            <i class="fas fa-language text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">Accent-Aware</h3>
+                        <p class="text-gray-600 text-sm">
+                            Captures local vocal characteristics and intonation patterns for authentic regional speech synthesis.
+                        </p>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
+                        <div class="text-pink-600 mb-3">
+                            <i class="fas fa-brain text-2xl"></i>
+                        </div>
+                        <h3 class="font-semibold text-lg mb-2">Transformer Models</h3>
+                        <p class="text-gray-600 text-sm">
+                            Deep linguistic analysis enables context-aware speech generation that reflects natural human expression.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-gray-50 py-6 border-t border-gray-200">
+            <div class="container mx-auto px-4 text-center">
+                <p class="text-gray-500 text-sm">
+                    &copy; 2025 LAHJA AI. Advanced text-to-speech powered by VITS architecture and transformer models.
+                </p>
+            </div>
+        </footer>
+    </div>
+ 
+        <script type="module">
+            import {Client} from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+            document.addEventListener('DOMContentLoaded', async function () {
+            // Connect to Gradio client (must be inside async function)
+            const client = await Client.connect("wasmdashai/DemoLahja");
+
+            // DOM Elements
+            const textInput = document.getElementById('textInput');
+            const charCount = document.getElementById('charCount');
+            const clearBtn = document.getElementById('clearBtn');
+            const generateBtn = document.getElementById('generateBtn');
+            const voiceSelect = document.getElementById('voiceSelect');
+            const speedSelect = document.getElementById('speedSelect');
+            const loadingState = document.getElementById('loadingState');
+            const audioPlayerContainer = document.getElementById('audioPlayerContainer');
+            const emptyState = document.getElementById('emptyState');
+            const audioPlayer = document.getElementById('audioPlayer');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const audioInfo = document.getElementById('audioInfo');
+
+            const voiceLabels = {
+                'us': 'American English',
+                'SA1': 'Najdi Arabic Haba v1',
+                'SA2': 'Najdi Arabic Haba v2',
+                'SA3': 'Najdi Arabic AHmmed v1',
+            
+            };
+
+            const voiceModels = {
+                'us': 'wasmdashai/vits-en-v1',
+                'SA1': 'wasmdashai/vits-ar-sa-huba-v1',
+                'SA2': 'wasmdashai/vits-ar-sa-huba-v2',
+                'SA3': 'wasmdashai/vits-ar-sa-A',
+
+           
+            };
+
+            const speedLabels = {
+                '0.3': 'Slow',
+            '1.0': 'Normal',
+            '1.2': 'Fast'
+            };
+
+            // Update character count
+            textInput.addEventListener('input', function () {
+                const count = textInput.value.length;
+            charCount.textContent = `${count} characters`;
+            clearBtn.classList.toggle('invisible', count === 0);
+            });
+
+            // Clear text input
+            clearBtn.addEventListener('click', function () {
+                textInput.value = '';
+            charCount.textContent = '0 characters';
+            clearBtn.classList.add('invisible');
+            });
+
+            // Generate voice
+            generateBtn.addEventListener('click', async function () {
+                const text = textInput.value.trim();
+            if (!text) {
+                alert('Please enter some text to convert to speech.');
+            return;
+                }
+
+            const voice = voiceSelect.value;
+            const speed = parseFloat(speedSelect.value);
+
+            loadingState.classList.remove('hidden');
+            audioPlayerContainer.classList.add('hidden');
+            emptyState.classList.add('hidden');
+                console.log("start result:", voice);
+
+            try {
+                    const result = await client.predict("/predict", {
+                text: text,
+                        name_model: voiceModels[voice],
+            speaking_rate: speed
+                    });
+                console.log("Prediction result:", result);
+
+            const audioUrl = result.data?.[0]?.url;
+            if (!audioUrl) throw new Error("No audio URL received");
+            
+            audioPlayer.src = audioUrl;
+            audioInfo.textContent = `${voiceLabels[voice]} • ${speedLabels[speed.toFixed(1)]} speed`;
+
+            loadingState.classList.add('hidden');
+            audioPlayerContainer.classList.remove('hidden');
+
+                    // Auto play
+                    setTimeout(() => {
+                audioPlayer.play().catch(e => console.warn('Autoplay failed:', e));
+                    }, 300);
+                } catch (err) {
+                console.error("Error during prediction:", err);
+            loadingState.classList.add('hidden');
+            emptyState.classList.remove('hidden');
+                }
+            });
+
+            // Download audio
+            downloadBtn.addEventListener('click', function () {
+                if (audioPlayer.src) {
+                    const a = document.createElement('a');
+            a.href = audioPlayer.src;
+            a.download = `lahja-ai-voice-${Date.now()}.mp3`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+                }
+            });
+
+            // Initialize char count
+            textInput.dispatchEvent(new Event('input'));
+        });
+    </script>
+
+</body>
+</html>