Spaces:
Running
Running
File size: 7,353 Bytes
ff37766 2770657 ff37766 2770657 ff37766 2770657 ff37766 2770657 ff37766 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VoiceCraft AI Assistant</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
</head>
<body class="bg-gray-900 text-white">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<div id="vanta-background" class="absolute inset-0 -z-10"></div>
<div class="max-w-4xl mx-auto backdrop-blur-sm bg-black/30 rounded-xl p-8 shadow-2xl">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold mb-4">VoiceCraft AI Assistant</h1>
<p class="text-lg text-gray-300">Transform your voice with AI-powered speech processing</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Speech Processing Card -->
<div class="bg-gray-800/70 rounded-lg p-6 hover:shadow-lg transition-all">
<div class="flex items-center mb-4">
<i data-feather="mic" class="w-6 h-6 mr-3 text-purple-400"></i>
<h2 class="text-xl font-semibold">Speech Processing</h2>
</div>
<p class="text-gray-300 mb-4">Upload audio files or record directly to apply AI processing.</p>
<button id="recordBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md flex items-center">
<i data-feather="mic" class="w-4 h-4 mr-2"></i>
Record Audio
</button>
<input type="file" id="audioUpload" accept="audio/*" class="hidden">
<label for="audioUpload" class="block mt-3 bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-center cursor-pointer">
<i data-feather="upload" class="w-4 h-4 mr-2 inline"></i>
Upload Audio
</label>
</div>
<!-- Processing Options Card -->
<div class="bg-gray-800/70 rounded-lg p-6 hover:shadow-lg transition-all">
<div class="flex items-center mb-4">
<i data-feather="settings" class="w-6 h-6 mr-3 text-blue-400"></i>
<h2 class="text-xl font-semibold">Processing Options</h2>
</div>
<div class="space-y-4">
<div>
<label class="block text-gray-300 mb-1">Processing Type:</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white">
<option>Speech Recognition</option>
<option>Voice Conversion</option>
<option>Speech Enhancement</option>
<option>Emotion Recognition</option>
</select>
</div>
<div>
<label class="block text-gray-300 mb-1">Output Format:</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md px-3 py-2 text-white">
<option>WAV</option>
<option>MP3</option>
<option>OGG</option>
</select>
</div>
<button id="processBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center justify-center">
<i data-feather="play" class="w-4 h-4 mr-2"></i>
Process Audio
</button>
</div>
</div>
</div>
<!-- Results Section -->
<div class="mt-12 bg-gray-800/70 rounded-lg p-6">
<h2 class="text-xl font-semibold mb-4 flex items-center">
<i data-feather="activity" class="w-5 h-5 mr-2 text-green-400"></i>
Processing Results
</h2>
<div id="resultsContainer" class="min-h-40 border-2 border-dashed border-gray-600 rounded-lg p-4 flex flex-col items-center justify-center text-gray-400">
<p>Your processed audio will appear here...</p>
</div>
<div class="mt-6 grid md:grid-cols-2 gap-6 hidden" id="comparisonSection">
<div class="bg-gray-700/50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-center">Original Audio</h3>
<div class="w-full bg-gray-800 rounded h-24 mb-2" id="originalWaveform"></div>
<audio controls class="w-full"></audio>
</div>
<div class="bg-gray-700/50 p-4 rounded-lg">
<h3 class="font-medium mb-2 text-center">Processed Audio</h3>
<div class="w-full bg-gray-800 rounded h-24 mb-2" id="processedWaveform"></div>
<audio controls class="w-full"></audio>
</div>
</div>
<div class="mt-4 flex space-x-3">
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md flex items-center disabled:opacity-50" disabled>
<i data-feather="download" class="w-4 h-4 mr-2"></i>
Download
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md flex items-center disabled:opacity-50" disabled>
<i data-feather="share-2" class="w-4 h-4 mr-2"></i>
Share
</button>
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md flex items-center hidden" id="compareBtn">
<i data-feather="compare" class="w-4 h-4 mr-2"></i>
Compare
</button>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.WAVES({
el: "#vanta-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x4b0082,
shininess: 35.00,
waveHeight: 15.00,
waveSpeed: 0.85,
zoom: 0.75
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |