Hugging Face's logo

Spaces:
shethjenil
/
SvaraSynth
Running

App Files Community
SvaraSynth / 11.html
shethjenil's picture
shethjenil
Upload 18 files
9c92d10 verified
raw
history blame contribute delete
14.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>Section – OSS Community</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"/>
<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;
background-image:
radial-gradient(circle at 100% 0%, rgba(0, 243, 255, 0.05) 0%, transparent 25%),
radial-gradient(circle at 0% 100%, rgba(255, 153, 51, 0.05) 0%, transparent 25%);
}
/* Header */
.header {
padding: 40px 60px 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 10;
}
.tag {
font-family: 'Roboto Mono', monospace;
color: #00ff9d;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 8px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.title {
font-size: 42px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.1;
}
.title span {
color: #00f3ff;
}
/* Content Layout */
.content-wrapper {
flex: 1;
display: flex;
padding: 20px 60px 50px;
gap: 40px;
position: relative;
z-index: 5;
}
.left-col {
flex: 1.8;
display: flex;
flex-direction: column;
gap: 30px;
}
.right-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 25px;
}
/* Repo Banner */
.repo-banner {
background: rgba(20, 20, 25, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.repo-info {
display: flex;
align-items: center;
gap: 15px;
}
.repo-icon {
font-size: 32px;
color: #fff;
}
.repo-name {
font-family: 'Roboto Mono', monospace;
font-size: 18px;
font-weight: 700;
color: #00f3ff;
}
.repo-badges {
display: flex;
gap: 10px;
}
.badge {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid;
display: flex;
align-items: center;
gap: 6px;
}
.badge-license { border-color: #00ff9d; color: #00ff9d; background: rgba(0, 255, 157, 0.1); }
.badge-stars { border-color: #ff9933; color: #ff9933; background: rgba(255, 153, 51, 0.1); }
/* Contribution Grid */
.contrib-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
flex: 1;
}
.contrib-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.contrib-card:hover {
border-color: #00f3ff;
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.contrib-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-bottom: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.c-cyan .contrib-icon { color: #00f3ff; border-color: rgba(0, 243, 255, 0.3); }
.c-orange .contrib-icon { color: #ff9933; border-color: rgba(255, 153, 51, 0.3); }
.c-green .contrib-icon { color: #00ff9d; border-color: rgba(0, 255, 157, 0.3); }
.c-purple .contrib-icon { color: #d946ef; border-color: rgba(217, 70, 239, 0.3); }
.contrib-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.contrib-desc {
font-size: 13px;
color: #aaa;
line-height: 1.5;
flex: 1;
}
.contrib-link {
margin-top: 15px;
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: #fff;
opacity: 0.6;
display: flex;
align-items: center;
gap: 5px;
}
/* Right Column Boxes */
.side-box {
background: rgba(20, 20, 25, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 25px;
height: 100%;
}
.ethics-box {
border-left: 4px solid #ff9933;
background: linear-gradient(90deg, rgba(255, 153, 51, 0.05) 0%, transparent 100%);
}
.box-title {
font-family: 'Roboto Mono', monospace;
font-size: 14px;
color: #fff;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
}
.list-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
font-size: 13px;
color: #ccc;
line-height: 1.4;
}
.list-item i {
margin-top: 3px;
}
/* Background contribution graph effect */
.bg-grid {
position: absolute;
top: 20px;
right: 40px;
display: grid;
grid-template-columns: repeat(12, 12px);
grid-template-rows: repeat(5, 12px);
gap: 4px;
opacity: 0.2;
z-index: 0;
}
.bg-cell {
background: #333;
border-radius: 2px;
}
.bg-cell.active-1 { background: #0e4429; }
.bg-cell.active-2 { background: #006d32; }
.bg-cell.active-3 { background: #26a641; }
.bg-cell.active-4 { background: #00ff9d; box-shadow: 0 0 5px #00ff9d; }
/* Floating decoration */
.float-decoration {
position: absolute;
bottom: 40px;
right: 40px;
font-family: 'Roboto Mono', monospace;
font-size: 200px;
color: rgba(255, 255, 255, 0.02);
font-weight: 700;
line-height: 1;
pointer-events: none;
z-index: 0;
}
</style>
</head>
<body>
<div class="slide-container">
<!-- Decorative Background Grid (GitHub Style) -->
<div class="bg-grid">
<!-- Row 1 -->
<div class="bg-cell active-1"></div><div class="bg-cell"></div><div class="bg-cell active-2"></div><div class="bg-cell active-3"></div><div class="bg-cell"></div><div class="bg-cell active-1"></div><div class="bg-cell active-4"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-1"></div><div class="bg-cell active-3"></div><div class="bg-cell"></div>
<!-- Row 2 -->
<div class="bg-cell active-2"></div><div class="bg-cell active-3"></div><div class="bg-cell"></div><div class="bg-cell active-4"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-1"></div><div class="bg-cell active-3"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-4"></div><div class="bg-cell active-1"></div>
<!-- Row 3 -->
<div class="bg-cell active-1"></div><div class="bg-cell active-2"></div><div class="bg-cell active-3"></div><div class="bg-cell active-1"></div><div class="bg-cell active-4"></div><div class="bg-cell active-3"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-1"></div><div class="bg-cell active-4"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div>
<!-- Row 4 -->
<div class="bg-cell"></div><div class="bg-cell active-1"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-3"></div><div class="bg-cell active-2"></div><div class="bg-cell active-1"></div><div class="bg-cell active-4"></div><div class="bg-cell active-3"></div><div class="bg-cell active-2"></div><div class="bg-cell"></div><div class="bg-cell active-1"></div>
</div>
<!-- Header -->
<div class="header">
<div class="title-group">
<div class="tag"><i class="fas fa-users"></i> COMMUNITY DRIVEN</div>
<h1 class="title">Open-source &amp; <span>Impact</span></h1>
</div>
<div style="text-align: right;">
<p style="font-family: 'Roboto Mono', monospace; font-size: 12px; color: #888;">LICENSE: APACHE 2.0</p>
</div>
</div>
<!-- Main Content -->
<div class="content-wrapper">
<!-- Left Column: Repo & Tracks -->
<div class="left-col">
<!-- Repo Banner -->
<div class="repo-banner">
<div class="repo-info">
<i class="fab fa-github repo-icon"></i>
<div>
<div class="repo-name">dummyjenil/shruti</div>
<p style="font-size: 12px; color: #888; font-family: 'Roboto Mono';">Local-first Indic speech processing pipeline</p>
</div>
</div>
<div class="repo-badges">
<div class="badge badge-license"><i class="fas fa-scale-balanced"></i> MIT / Apache 2.0</div>
<div class="badge badge-stars"><i class="fas fa-star"></i> 0 Stars</div>
<div class="badge" style="border-color: #555; color: #aaa;"><i class="fas fa-code-branch"></i> v0.1.0-alpha</div>
</div>
</div>
<!-- Contribution Tracks Grid -->
<div class="contrib-grid">
<!-- Track 1: Models -->
<div class="contrib-card c-cyan">
<div class="contrib-icon"><i class="fas fa-microchip"></i></div>
<h3 class="contrib-title">Model Optimization</h3>
<p class="contrib-desc">Help quantize IndicConformer models for edge devices.</p>
<div class="contrib-link">GOOD FOR: ML ENGINEERS</div>
</div>
<!-- Track 2: Data -->
<div class="contrib-card c-orange">
<div class="contrib-icon"><i class="fas fa-database"></i></div>
<h3 class="contrib-title">Data Curation</h3>
<p class="contrib-desc">Generate Dataset For TTS Voice cloning</p>
<div class="contrib-link">GOOD FOR: LINGUISTS</div>
</div>
<!-- Track 3: Eval -->
<!-- <div class="contrib-card c-green">
<div class="contrib-icon"><i class="fas fa-ruler-combined"></i></div>
<h3 class="contrib-title">Evaluation Suite</h3>
<p class="contrib-desc">Build benchmarks for code-switching scenarios (Hinglish/Tanglish) to measure real-world accuracy.</p>
<div class="contrib-link">GOOD FOR: DATA SCIENTISTS</div>
</div> -->
<!-- Track 4: UI/UX -->
<div class="contrib-card c-purple">
<div class="contrib-icon"><i class="fas fa-layer-group"></i></div>
<h3 class="contrib-title">Accessible UI</h3>
<p class="contrib-desc">Design offline-first interfaces for rural education tools. Create visualizers for mindmaps.</p>
<div class="contrib-link">GOOD FOR: FRONTEND DEVS</div>
</div>
</div>
</div>
<!-- Right Column: Ethics & Impact -->
<div class="right-col">
<!-- Ethical AI Box -->
<div class="side-box ethics-box">
<div class="box-title" style="color: #ff9933;">
<i class="fas fa-shield-halved"></i> Ethical Guardrails
</div>
<div class="list-item">
<i class="fas fa-check-circle" style="color: #ff9933;"></i>
<p><strong>Consent-First Cloning:</strong> Voice cloning requires strict audio captcha verification.</p>
</div>
<div class="list-item">
<i class="fas fa-check-circle" style="color: #ff9933;"></i>
<p><strong>Watermarking:</strong> All generated audio contains imperceptible spectral watermarks.</p>
</div>
<div class="list-item">
<i class="fas fa-check-circle" style="color: #ff9933;"></i>
<p><strong>Local Privacy:</strong> No voice data ever leaves the user's device.</p>
</div>
</div>
<!-- Social Impact Box -->
<div class="side-box" style="border-left: 4px solid #00ff9d;">
<div class="box-title" style="color: #00ff9d;">
<i class="fas fa-globe-asia"></i> Real-World Impact
</div>
<div class="list-item">
<i class="fas fa-school" style="color: #00ff9d;"></i>
<p><strong>Education:</strong> Auto-note taking for students in vernacular medium schools.</p>
</div>
<div class="list-item">
<i class="fas fa-wifi" style="color: #00ff9d;"></i>
<p><strong>Rural Access:</strong> Works fully offline in low-connectivity zones.</p>
</div>
<div class="list-item">
<i class="fas fa-universal-access" style="color: #00ff9d;"></i>
<p><strong>Accessibility:</strong> Real-time captions for the hearing impaired.</p>
</div>
</div>
</div>
</div>
<!-- Float Decoration -->
<div class="float-decoration">OSS</div>
</div>
</body>
</html>