Spaces:

akpande2
/

Aurator_test

Paused

App Files Files Community

Aurator_test / index.html

akpande2

Create index.html

2da1bfd verified 3 months ago

raw

history blame contribute delete

16.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Aurator - AI Speech Coach</title>
	<style>
	* { margin: 0; padding: 0; box-sizing: border-box; }

	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
	color: white;
	min-height: 100vh;
	padding: 20px;
	}

	.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px;
	background: rgba(22, 33, 62, 0.9);
	border-radius: 24px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
	}

	h1 {
	text-align: center;
	font-size: 2.5em;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #E94560, #FF6B9D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.subtitle {
	text-align: center;
	color: rgba(255,255,255,0.7);
	margin-bottom: 40px;
	font-size: 1.1em;
	}

	.avatar-selector {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin: 30px 0;
	}

	.avatar-option {
	flex: 1;
	max-width: 200px;
	padding: 30px 20px;
	border: 3px solid rgba(255,255,255,0.1);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	background: rgba(255,255,255,0.05);
	}

	.avatar-option:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 107, 157, 0.5);
	}

	.avatar-option.selected {
	border-color: #FF6B9D;
	background: linear-gradient(135deg, rgba(233, 69, 96, 0.2), rgba(255, 107, 157, 0.2));
	box-shadow: 0 0 30px rgba(255, 107, 157, 0.3);
	}

	.avatar-icon { font-size: 3em; margin-bottom: 10px; }
	.avatar-name { font-size: 1.3em; font-weight: bold; margin-bottom: 5px; }
	.avatar-desc { font-size: 0.9em; color: rgba(255,255,255,0.6); }

	.recording-section {
	text-align: center;
	margin: 40px 0;
	padding: 30px;
	background: rgba(0,0,0,0.2);
	border-radius: 20px;
	}

	.button-group {
	display: flex;
	gap: 15px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 20px 0;
	}

	button {
	background: linear-gradient(135deg, #E94560, #FF6B9D);
	color: white;
	border: none;
	padding: 18px 35px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);
	}

	button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(233, 69, 96, 0.4);
	}

	button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #555;
	}

	button.stop { background: linear-gradient(135deg, #FFA500, #FFB84D); }
	button.secondary { background: linear-gradient(135deg, #4A90E2, #5FA8FF); }

	#status {
	margin: 25px 0;
	padding: 20px;
	background: rgba(255,255,255,0.1);
	border-radius: 12px;
	font-size: 1.1em;
	border-left: 4px solid #FF6B9D;
	}

	.loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	border-top-color: #FF6B9D;
	animation: spin 1s ease-in-out infinite;
	}

	@keyframes spin { to { transform: rotate(360deg); } }

	#results {
	margin-top: 40px;
	padding: 30px;
	background: rgba(255,255,255,0.05);
	border-radius: 20px;
	display: none;
	}

	.score-card {
	text-align: center;
	padding: 30px;
	margin: 20px 0;
	background: linear-gradient(135deg, rgba(233, 69, 96, 0.2), rgba(255, 107, 157, 0.1));
	border-radius: 20px;
	border: 2px solid rgba(255, 107, 157, 0.3);
	}

	.score-number {
	font-size: 4em;
	font-weight: bold;
	background: linear-gradient(135deg, #50C878, #5FDC8A);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.metrics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin: 25px 0;
	}

	.metric-card {
	padding: 20px;
	background: rgba(0,0,0,0.3);
	border-radius: 12px;
	border-left: 4px solid #4A90E2;
	}

	.metric-label {
	font-size: 0.9em;
	color: rgba(255,255,255,0.6);
	margin-bottom: 5px;
	}

	.metric-value {
	font-size: 1.5em;
	font-weight: bold;
	color: #4A90E2;
	}

	.section { margin: 30px 0; }

	.section-title {
	font-size: 1.5em;
	margin-bottom: 15px;
	color: #FF6B9D;
	}

	.transcript-box {
	background: rgba(0,0,0,0.3);
	padding: 20px;
	border-radius: 12px;
	line-height: 1.8;
	}

	.improved-box {
	background: linear-gradient(135deg, rgba(80, 200, 120, 0.2), rgba(95, 220, 138, 0.1));
	padding: 20px;
	border-radius: 12px;
	border: 2px solid rgba(80, 200, 120, 0.3);
	line-height: 1.8;
	}

	.tips-list {
	list-style: none;
	padding: 0;
	}

	.tips-list li {
	padding: 15px 15px 15px 50px;
	margin: 10px 0;
	background: rgba(0,0,0,0.3);
	border-radius: 12px;
	border-left: 4px solid #FFA500;
	position: relative;
	}

	.tips-list li::before {
	content: attr(data-number);
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 25px;
	height: 25px;
	background: #FFA500;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	}

	audio {
	width: 100%;
	margin: 15px 0;
	border-radius: 12px;
	}

	@media (max-width: 768px) {
	.container { padding: 20px; }
	h1 { font-size: 2em; }
	.avatar-selector { flex-direction: column; }
	.avatar-option { max-width: 100%; }
	button { width: 100%; }
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>🎤 Aurator</h1>
	<div class="subtitle">AI-Powered Speech Coach</div>

	<div class="avatar-selector">
	<div class="avatar-option selected" onclick="selectAvatar('male')" id="alex">
	<div class="avatar-icon">👨</div>
	<div class="avatar-name">Alex</div>
	<div class="avatar-desc">Energetic & Clear</div>
	</div>
	<div class="avatar-option" onclick="selectAvatar('female')" id="maya">
	<div class="avatar-icon">👩</div>
	<div class="avatar-name">Maya</div>
	<div class="avatar-desc">Warm & Encouraging</div>
	</div>
	</div>

	<div class="recording-section">
	<div class="button-group">
	<button onclick="startRecording()" id="recordBtn">🎙️ Start Recording</button>
	<button onclick="stopRecording()" id="stopBtn" class="stop" disabled>⏹️ Stop Recording</button>
	<button onclick="analyzeAudio()" id="analyzeBtn" class="secondary" disabled>🎯 Analyze Speech</button>
	</div>
	<div id="status">Ready to record. Click "Start Recording" and speak!</div>
	</div>

	<div id="results"></div>
	</div>

	<script>
	let mediaRecorder;
	let audioChunks = [];
	let audioBlob;
	let selectedAvatar = 'male';

	function selectAvatar(gender) {
	selectedAvatar = gender;
	document.getElementById('alex').classList.remove('selected');
	document.getElementById('maya').classList.remove('selected');
	document.getElementById(gender === 'male' ? 'alex' : 'maya').classList.add('selected');
	document.getElementById('status').innerHTML = `✅ ${gender === 'male' ? 'Alex' : 'Maya'} selected as your coach!`;
	}

	async function startRecording() {
	try {
	const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
	mediaRecorder = new MediaRecorder(stream);
	audioChunks = [];

	mediaRecorder.ondataavailable = (event) => {
	audioChunks.push(event.data);
	};

	mediaRecorder.onstop = () => {
	audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
	stream.getTracks().forEach(track => track.stop());
	document.getElementById('analyzeBtn').disabled = false;
	document.getElementById('status').innerHTML = '✅ Recording complete! Click "Analyze Speech" to get feedback.';
	};

	mediaRecorder.start();
	document.getElementById('recordBtn').disabled = true;
	document.getElementById('stopBtn').disabled = false;
	document.getElementById('status').innerHTML = '🎙️ <strong>Recording...</strong> Speak clearly!';

	} catch (err) {
	document.getElementById('status').innerHTML = '❌ Microphone access denied!';
	}
	}

	function stopRecording() {
	if (mediaRecorder && mediaRecorder.state !== 'inactive') {
	mediaRecorder.stop();
	document.getElementById('recordBtn').disabled = false;
	document.getElementById('stopBtn').disabled = true;
	}
	}

	async function analyzeAudio() {
	const formData = new FormData();
	formData.append('audio_file', audioBlob, 'recording.webm');
	formData.append('avatar_gender', selectedAvatar);

	document.getElementById('status').innerHTML = '<span class="loading"></span> Analyzing... This may take 30-60 seconds.';
	document.getElementById('analyzeBtn').disabled = true;

	try {
	const response = await fetch('/analyze', {
	method: 'POST',
	body: formData
	});

	if (!response.ok) throw new Error(`Server error: ${response.status}`);
	const data = await response.json();
	displayResults(data);

	} catch (err) {
	document.getElementById('status').innerHTML = '❌ Analysis failed! ' + err.message;
	}

	document.getElementById('analyzeBtn').disabled = false;
	}

	function displayResults(data) {
	const score = (data.overall_score * 10).toFixed(1);
	let message = '💪 Keep Practicing!';
	if (score >= 85) message = '🎉 Outstanding!';
	else if (score >= 70) message = '👏 Great Job!';

	document.getElementById('results').innerHTML = `
	<div class="score-card">
	<div style="font-size: 2em;">${message}</div>
	<div class="score-number">${score}</div>
	<div style="color: rgba(255,255,255,0.7); margin-top: 10px;">Overall Score</div>
	</div>

	<div class="section">
	<div class="section-title">🎯 Vocal Delivery</div>
	<div class="metrics-grid">
	<div class="metric-card">
	<div class="metric-label">Pacing</div>
	<div class="metric-value">${data.pacing.words_per_minute.toFixed(0)} WPM</div>
	<div class="metric-label">${data.pacing.category}</div>
	</div>
	<div class="metric-card" style="border-left-color: #9D4EDD;">
	<div class="metric-label">Prosody</div>
	<div class="metric-value" style="color: #9D4EDD;">${data.prosody.category}</div>
	</div>
	<div class="metric-card" style="border-left-color: #FFA500;">
	<div class="metric-label">Filler Words</div>
	<div class="metric-value" style="color: #FFA500;">${Object.values(data.filler_words).reduce((a,b)=>a+b,0)}</div>
	</div>
	<div class="metric-card" style="border-left-color: #E94560;">
	<div class="metric-label">Pauses</div>
	<div class="metric-value" style="color: #E94560;">${data.silence_detection.count}</div>
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-title">📝 Content</div>
	<div class="metrics-grid">
	<div class="metric-card" style="border-left-color: #50C878;">
	<div class="metric-label">Vocabulary</div>
	<div class="metric-value" style="color: #50C878;">${data.vocabulary.score}/100</div>
	</div>
	<div class="metric-card" style="border-left-color: #4A90E2;">
	<div class="metric-label">Flow</div>
	<div class="metric-value" style="color: #4A90E2;">${data.logical_flow.score}/100</div>
	</div>
	<div class="metric-card" style="border-left-color: #FF6B9D;">
	<div class="metric-label">Coherence</div>
	<div class="metric-value" style="color: #FF6B9D;">${data.coherence.score}/100</div>
	</div>
	</div>
	</div>

	<div class="section">
	<div class="section-title">📖 Transcript</div>
	<div class="transcript-box">${data.transcription}</div>
	</div>

	<div class="section">
	<div class="section-title">✨ Improved Version</div>
	<div class="improved-box">${data.improved_transcript}</div>
	${data.improved_audio_url ? `<audio controls src="${data.improved_audio_url}"></audio>` : ''}
	</div>

	<div class="section">
	<div class="section-title">💡 Coaching Tips</div>
	<ul class="tips-list">
	${data.personalized_tips.map((tip, i) => `<li data-number="${i+1}">${tip}</li>`).join('')}
	</ul>
	${data.avatar_audio_url ? `
	<div style="margin-top: 20px;">
	<div class="section-title">🎙️ Your Coach</div>
	<audio controls src="${data.avatar_audio_url}"></audio>
	</div>
	` : ''}
	</div>
	`;

	document.getElementById('results').style.display = 'block';
	document.getElementById('status').innerHTML = '✅ Analysis complete!';
	document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
	}
	</script>
	</body>
	</html>