SEO Title: Day 7: Building a Frontend Truth Meter UI #progressbar #emotionUX
Focus Keyphrase: AI lie detector
Meta Description: Learn how to build a dynamic frontend for your AI lie detector app with a Truth Score meter, progress bar, and real-time visual feedback.
Making the AI Lie Detector User-Friendly
Your AI lie detector backend now calculates a powerful Truth Score. Today, we’ll create a simple but effective frontend to display:
- 🎙️ The transcribed speech
- 🧠 GPT semantic analysis
- 🎧 Vocal emotion score
- ✅ Final Truth Score as a progress bar
Step 1: Update frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AI Lie Detector</title>
<style>
#truthBar {
width: 100%;
background: #eee;
height: 30px;
margin-top: 20px;
border-radius: 15px;
overflow: hidden;
}
#truthFill {
height: 100%;
width: 0%;
background: green;
text-align: center;
color: white;
line-height: 30px;
}
</style>
</head>
<body>
<h2>🎙️ AI Lie Detector</h2>
<button id="startBtn">Start Recording</button>
<button id="stopBtn" disabled>Stop Recording</button>
<div id="result" style="margin-top:20px"></div>
<div id="truthBar">
<div id="truthFill">0%</div>
</div>
<script src="recorder.js"></script>
</body>
</html>
Step 2: Update frontend/recorder.js
let mediaRecorder;
let audioChunks = [];
document.getElementById("startBtn").onclick = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
audioChunks = [];
mediaRecorder.ondataavailable = event => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
const formData = new FormData();
formData.append("audio", audioBlob);
const response = await fetch("http://localhost:5000/api/voice", {
method: "POST",
body: formData,
});
const data = await response.json();
document.getElementById("result").innerHTML = `
<b>Transcript:</b> ${data.transcript}<br>
<b>GPT Analysis:</b> ${data.gpt_analysis}<br>
<b>Emotion Score:</b> ${data.emotion_score}<br>
<b>Truth Score:</b> ${data.truth_score}%
`;
const truthFill = document.getElementById("truthFill");
truthFill.style.width = data.truth_score + "%";
truthFill.innerText = data.truth_score + "%";
if (data.truth_score > 70) {
truthFill.style.background = "green";
} else if (data.truth_score > 40) {
truthFill.style.background = "orange";
} else {
truthFill.style.background = "red";
}
};
document.getElementById("stopBtn").disabled = false;
};
document.getElementById("stopBtn").onclick = () => {
mediaRecorder.stop();
document.getElementById("stopBtn").disabled = true;
};
What Happens Now?
After recording and analyzing a user’s voice:
- 📝 The statement is shown
- 🧠 GPT analysis explanation is shown
- 🎧 Emotion score is shown
- ✅ Truth Score fills a colored bar in real time!
Why Visual Feedback Matters
Users can instantly see their truth probability, making the AI lie detector interactive, educational, and a bit dramatic — just like a real interrogation tool!
Coming Tomorrow
In Day 8: Fine-Tuning Truth Detection with Thresholds #smartdetection #uximprovement, we’ll improve the sensitivity, thresholds, and balance between emotion and semantics for different real-world use cases.
Tags: #AIUX #ProgressBarUI #LieDetection #VoiceUX
