|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tech Stack - Voice Sementle</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
|
|
|
--theme-primary: #4db8ff; |
|
|
--theme-primary-dark: #2ea3f2; |
|
|
--theme-primary-light: #7fcfff; |
|
|
--theme-secondary: #5bc0eb; |
|
|
--theme-accent: #ff9f43; |
|
|
--theme-accent-dark: #e08b2d; |
|
|
|
|
|
|
|
|
--bg-sky-start: #e8f4fc; |
|
|
--bg-sky-end: #f5faff; |
|
|
--bg-cloud: #ffffff; |
|
|
|
|
|
|
|
|
--text-primary: #2c3e50; |
|
|
--text-secondary: #5a7a9a; |
|
|
--text-muted: #8ba4bd; |
|
|
|
|
|
|
|
|
--success-color: #2ecc71; |
|
|
--warning-color: #f39c12; |
|
|
--error-color: #e74c3c; |
|
|
|
|
|
|
|
|
--surface-primary: #ffffff; |
|
|
--surface-secondary: #f0f7fc; |
|
|
--border-color: #c5dae8; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Nunito', 'Comic Neue', 'Helvetica Neue', Arial, sans-serif; |
|
|
background: linear-gradient(180deg, #e8f4fc 0%, #f5faff 100%); |
|
|
min-height: 100vh; |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar { |
|
|
width: 260px; |
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
backdrop-filter: blur(10px); |
|
|
border-right: 1px solid var(--border-color); |
|
|
padding: 24px; |
|
|
height: 100vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: 2px 0 12px rgba(77, 184, 255, 0.08); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 800; |
|
|
color: var(--theme-primary-dark); |
|
|
text-decoration: none; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
margin-bottom: 32px; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
font-size: 1.25rem; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); |
|
|
} |
|
|
|
|
|
.nav-section { |
|
|
margin-bottom: 24px; |
|
|
} |
|
|
|
|
|
.nav-title { |
|
|
font-size: 0.7rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.08em; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 12px; |
|
|
padding-left: 4px; |
|
|
} |
|
|
|
|
|
.nav-list { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
display: block; |
|
|
padding: 10px 14px; |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
border-radius: 10px; |
|
|
font-size: 0.875rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
background: rgba(77, 184, 255, 0.1); |
|
|
color: var(--theme-primary-dark); |
|
|
transform: translateX(4px); |
|
|
} |
|
|
|
|
|
.nav-link.active { |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.main { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 48px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.main-container { |
|
|
width: 100%; |
|
|
max-width: 920px; |
|
|
} |
|
|
|
|
|
.page-header { |
|
|
margin-bottom: 48px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.page-title { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 16px; |
|
|
background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-accent)); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.page-description { |
|
|
font-size: 1.1rem; |
|
|
color: var(--text-secondary); |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
margin-bottom: 48px; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 1.4rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 24px; |
|
|
padding-bottom: 12px; |
|
|
border-bottom: 2px solid var(--border-color); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.section-icon { |
|
|
width: 42px; |
|
|
height: 42px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.25rem; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
.section-icon.frontend { background: linear-gradient(135deg, #4db8ff, #7fcfff); } |
|
|
.section-icon.backend { background: linear-gradient(135deg, #2ecc71, #58d68d); } |
|
|
.section-icon.database { background: linear-gradient(135deg, #9b59b6, #bb8fce); } |
|
|
.section-icon.ai { background: linear-gradient(135deg, #ff9f43, #ffc87c); } |
|
|
.section-icon.audio { background: linear-gradient(135deg, #e74c3c, #ec7063); } |
|
|
.section-icon.tools { background: linear-gradient(135deg, #5a7a9a, #8ba4bd); } |
|
|
|
|
|
|
|
|
.tech-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.tech-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 16px; |
|
|
padding: 20px; |
|
|
transition: all 0.25s ease; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08); |
|
|
} |
|
|
|
|
|
.tech-card:hover { |
|
|
border-color: var(--theme-primary-light); |
|
|
box-shadow: 0 8px 24px rgba(77, 184, 255, 0.15); |
|
|
transform: translateY(-4px); |
|
|
} |
|
|
|
|
|
.tech-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.tech-icon { |
|
|
width: 44px; |
|
|
height: 44px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: 700; |
|
|
font-size: 0.875rem; |
|
|
color: white; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.tech-name { |
|
|
font-weight: 700; |
|
|
font-size: 1rem; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.tech-version { |
|
|
font-size: 0.7rem; |
|
|
font-weight: 600; |
|
|
color: var(--theme-primary-dark); |
|
|
background: rgba(77, 184, 255, 0.15); |
|
|
padding: 3px 10px; |
|
|
border-radius: 20px; |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.tech-description { |
|
|
font-size: 0.85rem; |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
|
|
|
.architecture-diagram { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid var(--border-color); |
|
|
border-radius: 20px; |
|
|
padding: 40px; |
|
|
margin-top: 24px; |
|
|
box-shadow: 0 4px 24px rgba(77, 184, 255, 0.1); |
|
|
} |
|
|
|
|
|
.arch-flow { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 24px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.arch-box { |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
padding: 24px 36px; |
|
|
border-radius: 16px; |
|
|
text-align: center; |
|
|
min-width: 140px; |
|
|
box-shadow: 0 8px 24px rgba(77, 184, 255, 0.3); |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.arch-box:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.arch-box.secondary { |
|
|
background: linear-gradient(135deg, var(--success-color), #58d68d); |
|
|
box-shadow: 0 8px 24px rgba(46, 204, 113, 0.3); |
|
|
} |
|
|
|
|
|
.arch-box.tertiary { |
|
|
background: linear-gradient(135deg, var(--theme-accent), #ffc87c); |
|
|
box-shadow: 0 8px 24px rgba(255, 159, 67, 0.3); |
|
|
} |
|
|
|
|
|
.arch-box-title { |
|
|
font-weight: 700; |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.arch-box-sub { |
|
|
font-size: 0.8rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.arch-arrow { |
|
|
font-size: 2rem; |
|
|
color: var(--theme-primary); |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
|
|
|
.toc { |
|
|
position: fixed; |
|
|
right: 48px; |
|
|
top: 48px; |
|
|
width: 180px; |
|
|
background: rgba(255, 255, 255, 0.85); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 16px; |
|
|
padding: 20px; |
|
|
border: 1px solid var(--border-color); |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.08); |
|
|
} |
|
|
|
|
|
.toc-title { |
|
|
font-size: 0.7rem; |
|
|
font-weight: 700; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.08em; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.toc-list { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.toc-item { |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.toc-link { |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
color: var(--text-muted); |
|
|
text-decoration: none; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.toc-link:hover { |
|
|
color: var(--theme-primary-dark); |
|
|
} |
|
|
|
|
|
|
|
|
.back-btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 12px 24px; |
|
|
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light)); |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 12px; |
|
|
font-weight: 700; |
|
|
font-size: 0.9rem; |
|
|
box-shadow: 0 4px 16px rgba(77, 184, 255, 0.3); |
|
|
transition: all 0.2s ease; |
|
|
margin-bottom: 32px; |
|
|
} |
|
|
|
|
|
.back-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(77, 184, 255, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.icon-gradio { background: linear-gradient(135deg, #ff9f43, #ffc87c); } |
|
|
.icon-python { background: linear-gradient(135deg, #3776ab, #5a9fd4); } |
|
|
.icon-fastapi { background: linear-gradient(135deg, #009688, #4db6ac); } |
|
|
.icon-postgres { background: linear-gradient(135deg, #336791, #5a8bb0); } |
|
|
.icon-gemini { background: linear-gradient(135deg, #4285f4, #7baaf7); } |
|
|
.icon-docker { background: linear-gradient(135deg, #2496ed, #61b0f1); } |
|
|
.icon-numpy { background: linear-gradient(135deg, #013243, #4dabcf); } |
|
|
.icon-pydub { background: linear-gradient(135deg, #e91e63, #f06292); } |
|
|
|
|
|
|
|
|
@media (max-width: 1300px) { |
|
|
.toc { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
display: none; |
|
|
} |
|
|
.main { |
|
|
margin-left: 0; |
|
|
padding: 24px 16px; |
|
|
} |
|
|
.page-title { |
|
|
font-size: 1.75rem; |
|
|
} |
|
|
.arch-flow { |
|
|
flex-direction: column; |
|
|
} |
|
|
.arch-arrow { |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
.tech-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.cloud { |
|
|
position: fixed; |
|
|
background: rgba(255, 255, 255, 0.6); |
|
|
border-radius: 50%; |
|
|
filter: blur(20px); |
|
|
opacity: 0.5; |
|
|
animation: float 20s infinite ease-in-out; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.cloud-1 { |
|
|
width: 200px; |
|
|
height: 100px; |
|
|
top: 10%; |
|
|
left: 5%; |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
.cloud-2 { |
|
|
width: 150px; |
|
|
height: 80px; |
|
|
top: 30%; |
|
|
right: 10%; |
|
|
animation-delay: -5s; |
|
|
} |
|
|
|
|
|
.cloud-3 { |
|
|
width: 180px; |
|
|
height: 90px; |
|
|
bottom: 20%; |
|
|
left: 15%; |
|
|
animation-delay: -10s; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0) translateX(0); } |
|
|
25% { transform: translateY(-20px) translateX(10px); } |
|
|
50% { transform: translateY(0) translateX(20px); } |
|
|
75% { transform: translateY(20px) translateX(10px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="cloud cloud-1"></div> |
|
|
<div class="cloud cloud-2"></div> |
|
|
<div class="cloud cloud-3"></div> |
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<nav class="sidebar"> |
|
|
<a href="#" class="logo"> |
|
|
<div class="logo-icon">V</div> |
|
|
Voice Sementle |
|
|
</a> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Overview</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#" class="nav-link active">Tech Stack</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#architecture" class="nav-link">Architecture</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Frontend</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#frontend" class="nav-link">Gradio UI</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">Backend</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#backend" class="nav-link">Services</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#database" class="nav-link">Database</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">AI / ML</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#ai" class="nav-link">AI Models</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#mcp" class="nav-link">MCP Integration</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a href="#audio" class="nav-link">Audio Processing</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="nav-section"> |
|
|
<div class="nav-title">DevOps</div> |
|
|
<ul class="nav-list"> |
|
|
<li class="nav-item"> |
|
|
<a href="#tools" class="nav-link">Tools</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="main"> |
|
|
<div class="main-container"> |
|
|
|
|
|
<a href="javascript:history.back()" class="back-btn"> |
|
|
β Back to App |
|
|
</a> |
|
|
|
|
|
<header class="page-header"> |
|
|
<h1 class="page-title">Tech Stack</h1> |
|
|
<p class="page-description"> |
|
|
Comprehensive technology stack for Voice Sementle - a daily voice puzzle game where pronunciation matters. |
|
|
Built with modern Python frameworks, AI models, and cloud services. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="architecture" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon tools">ποΈ</span> |
|
|
System Architecture |
|
|
</h2> |
|
|
<div class="architecture-diagram"> |
|
|
<div class="arch-flow"> |
|
|
<div class="arch-box"> |
|
|
<div class="arch-box-title">Client UI</div> |
|
|
<div class="arch-box-sub">Gradio 6.0</div> |
|
|
</div> |
|
|
<span class="arch-arrow">β</span> |
|
|
<div class="arch-box secondary"> |
|
|
<div class="arch-box-title">Services</div> |
|
|
<div class="arch-box-sub">Python Backend</div> |
|
|
</div> |
|
|
<span class="arch-arrow">β</span> |
|
|
<div class="arch-box tertiary"> |
|
|
<div class="arch-box-title">AI Models</div> |
|
|
<div class="arch-box-sub">Gemini + VoiceKit MCP</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="frontend" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon frontend">π¨</span> |
|
|
Frontend |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-gradio">Gr</div> |
|
|
<span class="tech-name">Gradio</span> |
|
|
<span class="tech-version">6.0.0</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Python-based UI framework. Powers interactive web interface with voice input, real-time feedback, modals, and dynamic game state transitions. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-python">Py</div> |
|
|
<span class="tech-name">Python</span> |
|
|
<span class="tech-version">3.11+</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Client application language. Leverages type hints, async/await patterns, and modern Python features for clean, maintainable code. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #4fc3f7, #81d4fa);">Hx</div> |
|
|
<span class="tech-name">HTTPX</span> |
|
|
<span class="tech-version">0.28.1</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Async HTTP client library for communicating with backend services and external APIs with full HTTP/2 support. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">Js</div> |
|
|
<span class="tech-name">Custom CSS/JS</span> |
|
|
<span class="tech-version">-</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Custom styling with animated backgrounds, modal components, radar charts, and responsive design for optimal user experience. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="backend" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon backend">β‘</span> |
|
|
Backend Services |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-python">Py</div> |
|
|
<span class="tech-name">Python Services</span> |
|
|
<span class="tech-version">3.11+</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Modular service architecture including voice analyzer, hint generator, database layer, and game state management with async/await support. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #ec4899, #f472b6);">Pd</div> |
|
|
<span class="tech-name">Pydantic</span> |
|
|
<span class="tech-version">2.0+</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Data validation and settings management with type safety, automatic serialization, and schema validation. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #10b981, #34d399);">Ay</div> |
|
|
<span class="tech-name">Asyncio</span> |
|
|
<span class="tech-version">Built-in</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Native Python async library for concurrent operations, enabling efficient handling of multiple voice analysis requests. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">Dv</div> |
|
|
<span class="tech-name">Python-dotenv</span> |
|
|
<span class="tech-version">1.0.0</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Environment variable management from .env files for secure API keys and configuration settings. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="database" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon database">ποΈ</span> |
|
|
Database |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-postgres">Pg</div> |
|
|
<span class="tech-name">PostgreSQL</span> |
|
|
<span class="tech-version">16-alpine</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Production-grade relational database. Stores user sessions, game history, daily puzzles, attempt statistics, and score analytics. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #0891b2, #22d3ee);">Ps</div> |
|
|
<span class="tech-name">psycopg2</span> |
|
|
<span class="tech-version">2.9+</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
PostgreSQL adapter for Python. Provides efficient database connections and query execution with connection pooling. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-docker">Dk</div> |
|
|
<span class="tech-name">Docker Volume</span> |
|
|
<span class="tech-version">-</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Persistent data storage with Docker volumes ensuring database persistence across container restarts. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="ai" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon ai">π€</span> |
|
|
AI / Machine Learning |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-gemini">Gm</div> |
|
|
<span class="tech-name">Google Gemini</span> |
|
|
<span class="tech-version">2.0 Flash</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Multimodal AI model powering intelligent hint generation, contextual feedback, and adaptive difficulty based on player performance. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #6366f1, #818cf8);">11</div> |
|
|
<span class="tech-name">ElevenLabs</span> |
|
|
<span class="tech-version">2.24.0</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Advanced text-to-speech API with voice cloning. Generates partial audio hints with reference voice matching for natural gameplay experience. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-numpy">Np</div> |
|
|
<span class="tech-name">NumPy</span> |
|
|
<span class="tech-version">1.26.4</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Numerical computing library for audio signal processing, feature extraction, and statistical analysis of voice patterns. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #0d9488, #2dd4bf);">Pd</div> |
|
|
<span class="tech-name">Pandas</span> |
|
|
<span class="tech-version">2.2.3</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Data analysis library for processing game statistics, tracking user progress, and generating performance insights. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="mcp" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon" style="background: linear-gradient(135deg, #8b5cf6, #a78bfa);">π</span> |
|
|
Model Context Protocol (MCP) |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #0891b2, #22d3ee);">MC</div> |
|
|
<span class="tech-name">MCP Client</span> |
|
|
<span class="tech-version">1.22.0</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Model Context Protocol client for seamless AI model integration. Manages sessions, tool calling, and context sharing across AI services. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #f97316, #fb923c);">Vk</div> |
|
|
<span class="tech-name">VoiceKit MCP</span> |
|
|
<span class="tech-version">HuggingFace</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Voice analysis MCP server providing voicekit_analyze_voice_similarity tool. Compares user recordings with reference audio for pronunciation scoring. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #ec4899, #f472b6);">SS</div> |
|
|
<span class="tech-name">SSE Client</span> |
|
|
<span class="tech-version">MCP</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Server-Sent Events client for real-time MCP communication. Enables streaming responses and bidirectional tool invocation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="audio" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon audio">π΅</span> |
|
|
Audio Processing |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-pydub">Pd</div> |
|
|
<span class="tech-name">PyDub</span> |
|
|
<span class="tech-version">0.25.1</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Audio manipulation library for format conversion, normalization, compression, and audio file editing with effects processing. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #059669, #34d399);">FF</div> |
|
|
<span class="tech-name">FFmpeg</span> |
|
|
<span class="tech-version">via ffmpy</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Multimedia framework for audio encoding/decoding. Handles format conversion and compression for optimal file sizes. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">B6</div> |
|
|
<span class="tech-name">Base64</span> |
|
|
<span class="tech-version">Built-in</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Audio data encoding for API transmission. Converts binary audio to base64 strings for MCP tool parameters. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #dc2626, #f87171);">Af</div> |
|
|
<span class="tech-name">Aiofiles</span> |
|
|
<span class="tech-version">24.1.0</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Async file operations for non-blocking audio file I/O. Enables concurrent file processing without blocking the event loop. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tools" class="section"> |
|
|
<h2 class="section-title"> |
|
|
<span class="section-icon tools">π οΈ</span> |
|
|
DevOps & Tools |
|
|
</h2> |
|
|
<div class="tech-grid"> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon icon-docker">Dk</div> |
|
|
<span class="tech-name">Docker</span> |
|
|
<span class="tech-version">Latest</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Containerization platform providing consistent development and deployment environments across all systems. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">DC</div> |
|
|
<span class="tech-name">Docker Compose</span> |
|
|
<span class="tech-version">Latest</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Multi-container orchestration for managing PostgreSQL database service with volume persistence and networking. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #64748b, #94a3b8);">Ev</div> |
|
|
<span class="tech-name">Environment Config</span> |
|
|
<span class="tech-version">-</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Secure configuration management with .env files for API keys (Gemini, ElevenLabs, VoiceKit) and sensitive settings. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #16a34a, #4ade80);">Sh</div> |
|
|
<span class="tech-name">Shell Scripts</span> |
|
|
<span class="tech-version">Bash</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Automated deployment scripts (start.sh, stop.sh) for streamlined application lifecycle management. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #ea580c, #fb923c);">Hf</div> |
|
|
<span class="tech-name">HuggingFace</span> |
|
|
<span class="tech-version">Hub</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Deployment platform hosting VoiceKit MCP server and application demos with integrated spaces for testing. |
|
|
</p> |
|
|
</div> |
|
|
<div class="tech-card"> |
|
|
<div class="tech-header"> |
|
|
<div class="tech-icon" style="background: linear-gradient(135deg, #9333ea, #a855f7);">Lg</div> |
|
|
<span class="tech-name">Logging</span> |
|
|
<span class="tech-version">Built-in</span> |
|
|
</div> |
|
|
<p class="tech-description"> |
|
|
Comprehensive logging system for debugging, monitoring API calls, tracking errors, and performance analysis. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
