Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=1280, height=720, initial-scale=1.0" name="viewport"/> | |
| <title>Problem Statement – Indic ASR Challenges</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&family=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet"/> | |
| <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/> | |
| <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; | |
| position: relative; | |
| background-color: #000000; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(0, 243, 255, 0.05) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 153, 51, 0.05) 0%, transparent 20%); | |
| } | |
| /* Decorative Grid Background */ | |
| .bg-grid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| z-index: 0; | |
| } | |
| /* Left Section: Title & Context */ | |
| .left-panel { | |
| flex: 0 0 35%; | |
| padding: 60px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| border-right: 1px solid rgba(0, 243, 255, 0.2); | |
| position: relative; | |
| z-index: 1; | |
| background-color: rgba(5, 5, 5, 0.8); | |
| } | |
| .section-tag { | |
| font-family: 'Roboto Mono', monospace; | |
| color: #ff9933; | |
| font-size: 14px; | |
| letter-spacing: 2px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .section-tag::before { | |
| content: ''; | |
| width: 20px; | |
| height: 2px; | |
| background-color: #ff9933; | |
| } | |
| .main-heading { | |
| font-size: 48px; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| margin-bottom: 30px; | |
| color: #ffffff; | |
| } | |
| .main-heading span { | |
| color: #00f3ff; | |
| display: block; | |
| } | |
| .description { | |
| font-size: 18px; | |
| line-height: 1.6; | |
| color: #a0a0a0; | |
| border-left: 2px solid #333; | |
| padding-left: 20px; | |
| } | |
| /* Right Section: Problem Cards */ | |
| .right-panel { | |
| flex: 1; | |
| padding: 60px 80px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| gap: 25px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .problem-card { | |
| display: flex; | |
| align-items: flex-start; | |
| background: rgba(20, 20, 25, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 25px; | |
| border-radius: 4px; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .problem-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background-color: #333; | |
| transition: background-color 0.3s ease; | |
| } | |
| /* Card Variants */ | |
| .card-lang::before { background-color: #ff9933; } /* Saffron */ | |
| .card-cloud::before { background-color: #00f3ff; } /* Cyan */ | |
| .card-perf::before { background-color: #ff3366; } /* Red/Pink accent */ | |
| .card-mem::before { background-color: #9933ff; } /* Purple accent */ | |
| .icon-box { | |
| width: 50px; | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| margin-right: 25px; | |
| font-size: 24px; | |
| flex-shrink: 0; | |
| } | |
| .card-lang .icon-box { color: #ff9933; border: 1px solid rgba(255, 153, 51, 0.3); } | |
| .card-cloud .icon-box { color: #00f3ff; border: 1px solid rgba(0, 243, 255, 0.3); } | |
| .card-perf .icon-box { color: #ff3366; border: 1px solid rgba(255, 51, 102, 0.3); } | |
| .card-mem .icon-box { color: #9933ff; border: 1px solid rgba(153, 51, 255, 0.3); } | |
| .content-box { | |
| flex: 1; | |
| } | |
| .card-title { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .card-text { | |
| font-size: 16px; | |
| color: #b0b0b0; | |
| line-height: 1.4; | |
| margin: 0; | |
| } | |
| /* Tech decorative elements */ | |
| .corner-bracket { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(0, 243, 255, 0.5); | |
| z-index: 2; | |
| } | |
| .tl { top: 40px; left: 40px; border-bottom: none; border-right: none; } | |
| .tr { top: 40px; right: 40px; border-bottom: none; border-left: none; } | |
| .bl { bottom: 40px; left: 40px; border-top: none; border-right: none; } | |
| .br { bottom: 40px; right: 40px; border-top: none; border-left: none; } | |
| .scan-line { | |
| position: absolute; | |
| right: 0; | |
| top: 20%; | |
| width: 2px; | |
| height: 60%; | |
| background: linear-gradient(to bottom, transparent, #00f3ff, transparent); | |
| opacity: 0.3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide-container"> | |
| <div class="bg-grid"></div> | |
| <!-- Decorative Corners --> | |
| <div class="corner-bracket tl"></div> | |
| <div class="corner-bracket tr"></div> | |
| <div class="corner-bracket bl"></div> | |
| <div class="corner-bracket br"></div> | |
| <div class="scan-line"></div> | |
| <!-- Left Panel --> | |
| <div class="left-panel"> | |
| <div class="section-tag"> | |
| <p>CURRENT LANDSCAPE</p> | |
| </div> | |
| <h2 class="main-heading"> | |
| Problem Statement | |
| <span>Indic ASR Today</span> | |
| </h2> | |
| <div class="description"> | |
| <p>Despite advancements in AI, building robust voice interfaces for India remains a complex challenge due to linguistic diversity and infrastructure gaps.</p> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="right-panel"> | |
| <!-- Card 1: Linguistic Complexity --> | |
| <div class="problem-card card-lang"> | |
| <div class="icon-box"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <div class="content-box"> | |
| <h3 class="card-title">Linguistic Complexity</h3> | |
| <p class="card-text">22+ official languages, extreme code-mixing (Hinglish, Tanglish), and high dialect diversity create massive recognition gaps.</p> | |
| </div> | |
| </div> | |
| <!-- Card 2: Cloud Dependency --> | |
| <div class="problem-card card-cloud"> | |
| <div class="icon-box"> | |
| <i class="fas fa-cloud-showers-heavy"></i> | |
| </div> | |
| <div class="content-box"> | |
| <h3 class="card-title">Cloud Dependency</h3> | |
| <p class="card-text">High costs ($/min), privacy risks for sensitive data, API throttling, and network latency make real-time interaction sluggish.</p> | |
| </div> | |
| </div> | |
| <!-- Card 3: Edge Incompatibility --> | |
| <div class="problem-card card-perf"> | |
| <div class="icon-box"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <div class="content-box"> | |
| <h3 class="card-title">Heavy Compute Needs</h3> | |
| <p class="card-text">Existing SOTA models (Whisper-large) are too heavy for consumer edge devices and lack granular per-character timestamps.</p> | |
| </div> | |
| </div> | |
| <!-- Card 4: Lack of Intelligence --> | |
| <div class="problem-card card-mem"> | |
| <div class="icon-box"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="content-box"> | |
| <h3 class="card-title">Zero Context Memory</h3> | |
| <p class="card-text">Standard ASR systems have no speaker memory or long-term context, treating every sentence as an isolated event.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |