Ahmed Galadima
56d56395ee
- Added "audioCapture" permission to manifest for microphone access. - Introduced DeepSeek as a new AI provider option in the side panel. - Implemented a capture mode selection (tab-only, mic-only, mixed) in the side panel. - Added options to enable/disable the extension and auto-open the assistant window. - Integrated a mic monitor feature with live input level visualization. - Included buttons for requesting microphone permission and granting tab access. - Updated styles for new sections and mic level visualization. - Enhanced model fetching logic to support DeepSeek and improved error handling.
139 lines
5.2 KiB
HTML
139 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Interview Assistant</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h3>AI Interview Assistant</h3>
|
|
|
|
<div class="ai-provider-section">
|
|
<label for="aiProvider">AI Provider:</label>
|
|
<select id="aiProvider">
|
|
<option value="openai">OpenAI (GPT)</option>
|
|
<option value="anthropic">Anthropic (Claude)</option>
|
|
<option value="google">Google (Gemini)</option>
|
|
<option value="deepseek">DeepSeek</option>
|
|
<option value="ollama">Ollama (Local)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="model-selection">
|
|
<label for="modelSelect">Model:</label>
|
|
<select id="modelSelect">
|
|
<!-- Options will be populated based on provider selection -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="api-key-section">
|
|
<input type="password" id="apiKeyInput" placeholder="Enter your API Key here">
|
|
<button id="saveApiKey">Save API Key</button>
|
|
<div id="apiKeyStatus" class="status-message"></div>
|
|
</div>
|
|
|
|
<div class="capture-mode-section">
|
|
<label for="captureModeSelect">Capture mode:</label>
|
|
<select id="captureModeSelect">
|
|
<option value="tab">Tab-only (default)</option>
|
|
<option value="mic">Mic-only</option>
|
|
<option value="mixed">Mixed (experimental)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="active-state-section">
|
|
<label>
|
|
<input type="checkbox" id="extensionActiveToggle" checked>
|
|
Extension Active
|
|
</label>
|
|
</div>
|
|
|
|
<div class="overlay-visibility-section">
|
|
<label>
|
|
<input type="checkbox" id="autoOpenAssistantWindow">
|
|
Auto-open assistant window after Start Listening
|
|
</label>
|
|
<div class="status-message" id="sidepanelTip">
|
|
Tip: You can close this side panel while listening; the in-tab overlay will keep running.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mic-monitor-section">
|
|
<h4>🎙️ Mic Monitor</h4>
|
|
<label for="inputDeviceSelect">Input device:</label>
|
|
<select id="inputDeviceSelect"></select>
|
|
<div id="inputDeviceStatus" class="status-message"></div>
|
|
<div class="mic-level">
|
|
<div class="mic-level-bar" id="micLevelBar"></div>
|
|
</div>
|
|
<button id="startMicMonitor">Enable Mic Monitor</button>
|
|
</div>
|
|
|
|
<div class="performance-section">
|
|
<label>
|
|
<input type="checkbox" id="speedModeToggle">
|
|
Optimize for speed (faster, shorter answers)
|
|
</label>
|
|
</div>
|
|
|
|
<div class="context-section">
|
|
<h4>📄 Context Management</h4>
|
|
<div class="context-tabs">
|
|
<button class="tab-button active" data-tab="upload">Upload Files</button>
|
|
<button class="tab-button" data-tab="text">Add Text</button>
|
|
<button class="tab-button" data-tab="manage">Manage (0)</button>
|
|
</div>
|
|
|
|
<div id="uploadTab" class="tab-content active">
|
|
<input type="file" id="contextFileInput" multiple accept=".txt,.pdf,.doc,.docx" style="display: none;">
|
|
<button id="uploadContextBtn">📁 Upload CV/Job Description</button>
|
|
<div class="upload-info">Supports: PDF, DOC, DOCX, TXT</div>
|
|
</div>
|
|
|
|
<div id="textTab" class="tab-content">
|
|
<textarea id="contextTextInput" placeholder="Paste your CV, job description, or any relevant context here..."></textarea>
|
|
<select id="contextTypeSelect">
|
|
<option value="general">General context</option>
|
|
<option value="system">System prompt</option>
|
|
<option value="cv">CV / Resume</option>
|
|
<option value="job_description">Job description</option>
|
|
</select>
|
|
<input type="text" id="contextTitleInput" placeholder="Context title (e.g., 'My CV', 'Job Description')">
|
|
<button id="addContextBtn">💾 Save Context</button>
|
|
</div>
|
|
|
|
<div id="manageTab" class="tab-content">
|
|
<div id="contextList"></div>
|
|
<button id="clearAllContextBtn" class="danger-btn">🗑️ Clear All Context</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-section">
|
|
<h4>📱 Multi-Device Listening</h4>
|
|
<div class="device-options">
|
|
<button id="enableRemoteListening">🌐 Enable Remote Access</button>
|
|
<div id="remoteStatus" class="status-message"></div>
|
|
<div id="deviceInfo" class="device-info" style="display: none;">
|
|
<div>📱 <strong>Access from any device:</strong></div>
|
|
<div class="access-url" id="accessUrl"></div>
|
|
<button id="copyUrlBtn">📋 Copy Link</button>
|
|
<div class="qr-code" id="qrCode"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="toggleListening">Start Listening</button>
|
|
<button id="showOverlay">Show Overlay</button>
|
|
<button id="requestMicPermission">Request Microphone Permission</button>
|
|
<button id="grantTabAccess">Grant Tab Access</button>
|
|
<div id="micPermissionStatus" class="status-message"></div>
|
|
<div id="tabAccessStatus" class="status-message"></div>
|
|
<div id="transcript"></div>
|
|
<div id="aiResponse"></div>
|
|
</div>
|
|
<script src="sidepanel.js"></script>
|
|
</body>
|
|
</html>
|