Hugging Face's logo

Spaces:
shethjenil
/
SvaraSynth
Running

App Files Community
SvaraSynth / 10.html
shethjenil's picture
shethjenil
Upload 18 files
9c92d10 verified
raw
history blame contribute delete
13.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=1280, height=720, initial-scale=1.0" name="viewport"/>
<title>Metrics – KPI Big Number</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;600;700&amp;family=Roboto+Mono:wght@300;400;500&amp;display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 1280px;
height: 720px;
overflow: hidden;
font-family: 'Space Grotesk', sans-serif;
background-color: #050505;
color: #ffffff;
}
.slide-container {
width: 1280px;
height: 720px;
display: flex;
flex-direction: column;
position: relative;
background-color: #050505;
/* Tech grid background */
background-image:
linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Decorative Corners */
.corner {
position: absolute;
width: 40px;
height: 40px;
border: 2px solid #00f3ff;
z-index: 10;
}
.tl { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
.tr { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
.bl { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.br { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }
/* Header */
.header {
padding: 40px 60px 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
z-index: 5;
}
.title-group {
display: flex;
flex-direction: column;
}
.tag {
font-family: 'Roboto Mono', monospace;
color: #ff9933;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 8px;
text-transform: uppercase;
}
.title {
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.1;
}
.title span {
color: #00f3ff;
}
/* Content Grid */
.content-grid {
flex: 1;
padding: 20px 60px 50px;
display: grid;
grid-template-columns: 1.2fr 0.8fr; /* Left for Big KPIs, Right for Charts */
gap: 40px;
position: relative;
z-index: 5;
}
/* KPI Cards Section (Left) */
.kpi-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.kpi-row {
display: flex;
gap: 20px;
}
.kpi-card-large {
flex: 2;
background: rgba(20, 20, 25, 0.8);
border: 1px solid rgba(0, 243, 255, 0.2);
border-radius: 12px;
padding: 25px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.kpi-card-small {
flex: 1;
background: rgba(20, 20, 25, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.kpi-label {
font-family: 'Roboto Mono', monospace;
font-size: 14px;
color: #888;
margin-bottom: 5px;
display: flex;
align-items: center;
gap: 8px;
}
.kpi-value-big {
font-size: 72px;
font-weight: 700;
color: #fff;
line-height: 1;
text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
margin: 10px 0;
}
.kpi-value-big span {
font-size: 24px;
color: #00f3ff;
font-weight: 400;
}
.kpi-value-medium {
font-size: 42px;
font-weight: 700;
color: #fff;
margin: 5px 0;
}
.kpi-value-medium span {
font-size: 18px;
color: #ff9933;
}
.kpi-subtext {
font-size: 14px;
color: #aaa;
line-height: 1.4;
}
.kpi-highlight {
color: #00ff9d;
font-weight: 600;
}
/* Speedometer/Chart Section (Right) */
.chart-section {
background: rgba(10, 10, 12, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 25px;
display: flex;
flex-direction: column;
}
.chart-container {
flex: 1;
position: relative;
width: 100%;
height: 100%;
}
.chart-label {
font-family: 'Roboto Mono', monospace;
color: #fff;
font-size: 14px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
}
/* Accuracy Comparison Bar (CSS based) */
.accuracy-bars {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 10px;
}
.bar-group {
width: 100%;
}
.bar-label {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #ccc;
margin-bottom: 5px;
font-family: 'Roboto Mono', monospace;
}
.bar-track {
width: 100%;
height: 8px;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.bar-fill {
height: 100%;
border-radius: 4px;
position: relative;
}
.fill-cyan { background-color: #00f3ff; width: 92%; box-shadow: 0 0 10px rgba(0, 243, 255, 0.5); }
.fill-orange { background-color: #ff9933; width: 89%; box-shadow: 0 0 10px rgba(255, 153, 51, 0.5); }
.fill-gray { background-color: #555; width: 85%; }
/* Hardware specs box */
.specs-box {
margin-top: 20px;
background: rgba(0, 0, 0, 0.5);
border: 1px dashed #444;
padding: 15px;
border-radius: 8px;
}
.specs-title {
color: #888;
font-size: 12px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'Roboto Mono', monospace;
}
.specs-list {
display: flex;
gap: 15px;
font-size: 13px;
color: #fff;
}
.spec-item {
display: flex;
align-items: center;
gap: 6px;
}
.spec-icon {
color: #00f3ff;
}
/* Background Graphics */
.bg-graphic {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 243, 255, 0.03) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
</style>
</head>
<body>
<div class="slide-container">
<!-- Decorative Corners -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="bg-graphic"></div>
<!-- Header -->
<div class="header">
<div class="title-group">
<div class="tag">SYSTEM BENCHMARKS</div>
<h1 class="title">Performance <span>Metrics</span></h1>
</div>
<div style="font-family: 'Roboto Mono', monospace; font-size: 12px; color: #666;">
<p>TESTBED: RTX 4060 Ti • 16GB RAM • UBUNTU 22.04</p>
</div>
</div>
<!-- Main Content -->
<div class="content-grid">
<!-- Left Column: Big KPIs -->
<div class="kpi-section">
<!-- Top Row: Throughput (Hero KPI) -->
<div class="kpi-card-large" style="flex: 1.5;">
<div class="kpi-label">
<i class="fas fa-tachometer-alt" style="color: #00f3ff;"></i> PROCESSING THROUGHPUT
</div>
<div class="kpi-value-big">
60<span style="font-size: 48px;">×</span> <span>Real-time</span>
</div>
<p class="kpi-subtext">
Processes <span class="kpi-highlight">1 hour of audio in ~1 minute</span>.
Massive parallelism using batched GPU inference.
</p>
<!-- Visual Progress Bar for 1hr vs 1min -->
<div style="margin-top: 20px; position: relative;">
<div style="display: flex; justify-content: space-between; font-size: 10px; color: #666; font-family: 'Roboto Mono'; margin-bottom: 4px;">
<span>OUR SYSTEM (1m)</span>
<span>REAL-TIME (60m)</span>
</div>
<div style="width: 100%; height: 6px; background: #222; border-radius: 3px; overflow: hidden;">
<div style="width: 1.6%; height: 100%; background: #00f3ff; box-shadow: 0 0 8px #00f3ff;"></div>
</div>
</div>
</div>
<!-- Bottom Row: Latency & VRAM -->
<div class="kpi-row">
<!-- Latency -->
<div class="kpi-card-small">
<div class="kpi-label">
<i class="fas fa-bolt" style="color: #ff9933;"></i> STREAMING LATENCY
</div>
<div class="kpi-value-medium">
200<span>ms</span>
</div>
<p class="kpi-subtext">Chunk processing delay<br/>Feels instantaneous.</p>
</div>
<!-- VRAM -->
<div class="kpi-card-small">
<div class="kpi-label">
<i class="fas fa-memory" style="color: #00ff9d;"></i> VRAM USAGE
</div>
<div class="kpi-value-medium">
3.5<span>GB</span>
</div>
<p class="kpi-subtext">Runs on consumer GPUs<br/>(FP16 Quantized).</p>
</div>
</div>
</div>
<!-- Right Column: Charts & Accuracy -->
<div class="chart-section">
<!-- Accuracy Chart -->
<!-- <div class="chart-label">
<span><i class="fas fa-bullseye mr-2"></i> INDIC WER (LOWER IS BETTER)</span>
<span style="color: #666">Benchmark: CommonVoice</span>
</div> -->
<!-- Custom Bar Chart for Accuracy (WER) -->
<!-- Note: In WER, lower is better. Here visualizing ACCURACY (Higher is better) for positive impact -->
<!-- <div style="margin-bottom: 10px; font-size: 12px; color: #888; text-align: right;">ACCURACY RATE</div>
<div class="accuracy-bars"> -->
<!-- Hindi -->
<!-- <div class="bar-group">
<div class="bar-label">
<span>HINDI</span>
<span style="color: #00f3ff">92%</span>
</div>
<div class="bar-track">
<div class="bar-fill fill-cyan"></div>
</div>
</div> -->
<!-- Tamil -->
<!-- <div class="bar-group">
<div class="bar-label">
<span>TAMIL</span>
<span style="color: #ff9933">89%</span>
</div>
<div class="bar-track">
<div class="bar-fill fill-orange"></div>
</div>
</div> -->
<!-- Whisper Base (Comparison) -->
<!-- <div class="bar-group">
<div class="bar-label">
<span>WHISPER BASE</span>
<span>85%</span>
</div>
<div class="bar-track">
<div class="bar-fill fill-gray"></div>
</div>
</div>
</div> -->
<!-- Cost Efficiency -->
<div style="margin-top: 40px;">
<div class="chart-label">
<span><i class="fas fa-coins mr-2"></i> COST EFFICIENCY</span>
</div>
<div style="display: flex; align-items: center; justify-content: space-around; margin-top: 20px;">
<div style="text-align: center;">
<div style="font-size: 32px; color: #ff4444; font-weight: 700;">$0.02</div>
<div style="font-size: 10px; color: #888; margin-top: 5px;">CLOUD / MIN</div>
</div>
<div style="font-size: 20px; color: #555;"><i class="fas fa-arrow-right"></i></div>
<div style="text-align: center;">
<div style="font-size: 32px; color: #00f3ff; font-weight: 700;">$0.00</div>
<div style="font-size: 10px; color: #888; margin-top: 5px;">OURS / MIN</div>
</div>
</div>
</div>
<!-- Hardware Specs Footer -->
<div class="specs-box">
<div class="specs-title">OPTIMIZED FOR EDGE</div>
<div class="specs-list">
<div class="spec-item"><i class="fas fa-microchip spec-icon"></i> CUDA / ONNX</div>
<div class="spec-item"><i class="fas fa-box spec-icon"></i> Dockerized</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>