Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="VoiceGuard - AI-Generated Voice Detection for Indian Languages"> | |
| <title>VoiceGuard | AI Voice Detection</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="css/variables.css"> | |
| <link rel="stylesheet" href="css/base.css"> | |
| <link rel="stylesheet" href="css/components.css"> | |
| <link rel="stylesheet" href="css/animations.css"> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/svg+xml" | |
| href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- ==================== HEADER ==================== --> | |
| <header class="header"> | |
| <div class="header__brand"> | |
| <span class="header__logo">🛡️</span> | |
| <span class="header__title">VoiceGuard</span> | |
| </div> | |
| <div class="header__status"> | |
| <span class="status-indicator" id="apiStatus"> | |
| <span class="status-indicator__dot"></span> | |
| <span class="status-indicator__text">Checking...</span> | |
| </span> | |
| </div> | |
| </header> | |
| <!-- ==================== MAIN CONTENT ==================== --> | |
| <main class="main"> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <h1 class="hero__title">Detect AI-Generated Voice</h1> | |
| <p class="hero__subtitle"> | |
| Analyze audio samples in <strong>Tamil</strong>, <strong>English</strong>, | |
| <strong>Hindi</strong>, <strong>Malayalam</strong> & <strong>Telugu</strong> | |
| </p> | |
| </section> | |
| <!-- Content Grid --> | |
| <div class="content-grid"> | |
| <!-- Input Panel --> | |
| <div class="panel panel--input"> | |
| <h2 class="panel__title">Upload Audio</h2> | |
| <!-- File Upload Zone --> | |
| <div class="file-upload" id="fileUpload"> | |
| <div class="file-upload__dropzone" id="dropzone"> | |
| <div class="file-upload__icon"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="1.5"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> | |
| <polyline points="17 8 12 3 7 8" /> | |
| <line x1="12" y1="3" x2="12" y2="15" /> | |
| </svg> | |
| </div> | |
| <p class="file-upload__text">Drop your MP3 file here</p> | |
| <p class="file-upload__or">or</p> | |
| <button type="button" class="file-upload__browse" id="browseBtn"> | |
| Browse Files | |
| </button> | |
| <p class="file-upload__hint">MP3 only • 1-60 seconds • Max 10MB</p> | |
| </div> | |
| <input type="file" id="fileInput" accept=".mp3,audio/mpeg" hidden> | |
| <!-- File Preview --> | |
| <div class="file-preview" id="filePreview" hidden> | |
| <div class="file-preview__info"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="2"> | |
| <path d="M9 18V5l12-2v13" /> | |
| <circle cx="6" cy="18" r="3" /> | |
| <circle cx="18" cy="16" r="3" /> | |
| </svg> | |
| <div class="file-preview__details"> | |
| <p class="file-preview__name" id="fileName">audio.mp3</p> | |
| <p class="file-preview__meta" id="fileMeta">5.2s • 1.2 MB</p> | |
| </div> | |
| </div> | |
| <button type="button" class="file-preview__remove" id="removeBtn" aria-label="Remove file"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="2"> | |
| <line x1="18" y1="6" x2="6" y2="18" /> | |
| <line x1="6" y1="6" x2="18" y2="18" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Language Selector --> | |
| <div class="language-selector"> | |
| <label class="language-selector__label" for="languageSelect">Audio Language:</label> | |
| <select class="language-selector__select" id="languageSelect"> | |
| <option value="Tamil">Tamil</option> | |
| <option value="English" selected>English</option> | |
| <option value="Hindi">Hindi</option> | |
| <option value="Malayalam">Malayalam</option> | |
| <option value="Telugu">Telugu</option> | |
| </select> | |
| </div> | |
| <!-- Analyze Button --> | |
| <button type="button" class="analyze-btn" id="analyzeBtn" disabled> | |
| <span class="analyze-btn__idle"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="2"> | |
| <circle cx="11" cy="11" r="8" /> | |
| <line x1="21" y1="21" x2="16.65" y2="16.65" /> | |
| </svg> | |
| <span>Analyze Voice Sample</span> | |
| </span> | |
| <span class="analyze-btn__loading" hidden> | |
| <svg class="spinner" width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32" /> | |
| </svg> | |
| <span>Analyzing...</span> | |
| </span> | |
| </button> | |
| </div> | |
| <!-- Results Panel --> | |
| <div class="panel panel--results"> | |
| <h2 class="panel__title">Detection Results</h2> | |
| <!-- Empty State --> | |
| <div class="results-empty" id="resultsEmpty"> | |
| <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="1"> | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /> | |
| <polyline points="14 2 14 8 20 8" /> | |
| <line x1="16" y1="13" x2="8" y2="13" /> | |
| <line x1="16" y1="17" x2="8" y2="17" /> | |
| <polyline points="10 9 9 9 8 9" /> | |
| </svg> | |
| <p>Upload an audio file to see analysis results</p> | |
| </div> | |
| <!-- Results Content --> | |
| <div class="results-content" id="resultsContent" hidden> | |
| <!-- Verdict Card --> | |
| <div class="verdict-card" id="verdictCard"> | |
| <div class="verdict-card__icon" id="verdictIcon"> | |
| <!-- Dynamic icon --> | |
| </div> | |
| <div class="verdict-card__label" id="verdictLabel"> | |
| <!-- AI_GENERATED or HUMAN --> | |
| </div> | |
| </div> | |
| <!-- Confidence Meter --> | |
| <div class="confidence-meter"> | |
| <div class="confidence-meter__header"> | |
| <span>Confidence Score</span> | |
| <span class="confidence-meter__value" id="confidenceValue">--</span> | |
| </div> | |
| <div class="confidence-meter__track"> | |
| <div class="confidence-meter__fill" id="confidenceFill"></div> | |
| </div> | |
| </div> | |
| <!-- Language --> | |
| <div class="info-row"> | |
| <span class="info-row__label">Language:</span> | |
| <span class="info-row__value" id="resultLanguage">--</span> | |
| </div> | |
| <!-- Explanation --> | |
| <div class="explanation-card"> | |
| <div class="explanation-card__header"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" | |
| stroke-width="2"> | |
| <circle cx="12" cy="12" r="10" /> | |
| <line x1="12" y1="16" x2="12" y2="12" /> | |
| <line x1="12" y1="8" x2="12.01" y2="8" /> | |
| </svg> | |
| <span>Analysis Explanation</span> | |
| </div> | |
| <p class="explanation-card__text" id="explanationText"> | |
| <!-- Dynamic explanation --> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- ==================== FOOTER ==================== --> | |
| <footer class="footer"> | |
| <p>🏆 India AI Impact Summit Buildathon 2026 • VoiceGuard Team</p> | |
| </footer> | |
| <!-- ==================== TOAST CONTAINER ==================== --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| </div> | |
| <!-- Scripts --> | |
| <script type="module" src="js/app.js"></script> | |
| </body> | |
| </html> |