Hugging Face's logo

Spaces:
Azdeen
/
undefined
Running

App Files Community
undefined / index.html
Azdeen's picture
Azdeen
import gradio as gr
47b193e verified
raw
history blame contribute delete
16.5 kB
 <!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>