LearnTube-AI/popup.html at main · Sumit189/LearnTube-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LearnTube AI</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <div class="popup-header">
      <img src="icons/icon48.png" alt="LearnTube AI" class="header-icon">
      <div class="header-content">
        <h1>LearnTube AI</h1>
        <p>Transform your learning experience</p>
        <a id="openInstallGuide" class="install-guide-link" href="#" role="link">Installation Guide</a>
      </div>
    </div>

    <div class="popup-section" id="cacheSection">
      <h2>Cache & Regenerate</h2>
      <p class="tip-text">Clear cache to regenerate questions for this video or all videos.</p>
      <div style="margin-top: 12px; display: flex; gap: 12px;">
        <button id="clearCache" class="btn-primary">Clear This Video</button>
        <button id="clearAllCache" class="btn-test">Clear All Cache</button>
      </div>
    </div>

    <div class="popup-section collapsible-section collapsed" id="statusSection">
      <button class="collapsible-toggle" id="statusToggle" type="button" aria-expanded="false" aria-controls="statusContent">
        <span class="collapsible-title">Video Quiz Status</span>
        <span class="collapsible-summary">
          <span id="statusSummaryPill" class="status-pill status-pending">Checking…</span>
          <span class="collapsible-icon" aria-hidden="true"></span>
        </span>
      </button>
      <div id="statusContent" class="status-content" aria-hidden="true">
        <div class="status-placeholder">Checking current video...</div>
      </div>
    </div>

    <div class="popup-section collapsible-section collapsed" id="modelProviderSection">
      <button class="collapsible-toggle" id="modelProviderToggle" type="button" aria-expanded="false" aria-controls="modelProviderContent">
        <span class="collapsible-title">Select Model Provider</span>
        <span class="collapsible-summary">
          <span id="modelProviderSummary" class="status-pill status-pending">On Device</span>
          <span class="collapsible-icon" aria-hidden="true"></span>
        </span>
      </button>
      <div id="modelProviderContent" class="collapsible-content" aria-hidden="true">
        <div class="setting-description" style="margin-bottom: 16px;">Choose how LearnTube AI generates quizzes and summaries</div>

        <div class="setting-item radio-options-section">
          <div class="provider-radio-group">
            <label class="radio-option">
              <input type="radio" name="aiProvider" value="on-device" id="providerOnDevice" checked>
              <div class="radio-content">
                <div class="radio-header">
                  <span class="radio-label">On Device</span>
                  <span class="radio-badge private-badge">
                    <span class="lock-icon">🔒</span>
                    <span>Private</span>
                  </span>
                </div>
                <span class="radio-desc">100% Private • Runs locally on your device</span>
              </div>
            </label>
            <label class="radio-option">
              <input type="radio" name="aiProvider" value="gemini-api" id="providerGemini">
              <div class="radio-content">
                <div class="radio-header">
                  <span class="radio-label">Gemini API</span>
                  <span class="radio-badge gemini-badge">
                    <span class="bolt-icon">⚡</span>
                    <span>Fast</span>
                  </span>
                </div>
                <span class="radio-desc">Cloud-powered • Faster processing with Google AI</span>
              </div>
            </label>
          </div>
        </div>

        <div class="setting-item" id="geminiApiKeySetting" style="display: none;">
          <div class="setting-label">Enter API Key:</div>
          <div class="api-key-input-group">
            <input type="password" id="geminiApiKey" class="api-key-input" placeholder="Enter your API key">
            <button type="button" id="toggleApiKeyVisibility" class="api-key-eye-btn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
          </div>
        </div>

        <div class="setting-item">
          <a id="getApiKey" class="install-guide-link get-api-key-link" href="#" role="link">Get Free API Key</a>
          <div class="save-button-row">
            <button type="button" id="saveApiKey" class="save-api-key-btn">Save</button>
          </div>
        </div>
      </div>
    </div>

    <div class="popup-section">
      <h2>AI Model Status</h2>
      <div class="model-status">
        <div class="model-item">
          <div class="model-info">
            <div class="model-name">Language Model</div>
            <div class="model-description">Generates quiz questions</div>
          </div>
          <div class="model-status-indicator" id="languageModelStatus">
            <div class="status-dot"></div>
            <span class="status-text">Checking...</span>
            <div class="progress-bar" id="languageModelProgress" style="display: none;">
              <div class="progress-fill"></div>
              <span class="progress-text">0%</span>
            </div>
          </div>
        </div>

        <div class="model-item">
          <div class="model-info">
            <div class="model-name">Summarizer</div>
            <div class="model-description">Creates video summaries</div>
          </div>
          <div class="model-status-indicator" id="summarizerStatus">
            <div class="status-dot"></div>
            <span class="status-text">Checking...</span>
            <div class="progress-bar" id="summarizerProgress" style="display: none;">
              <div class="progress-fill"></div>
              <span class="progress-text">0%</span>
            </div>
          </div>
        </div>
      </div>

      <div class="model-download-cta">
        <button id="downloadModels" class="btn-primary" style="display: none;">Download AI Models</button>
        <p class="tip-text" id="downloadModelsHelp" style="display: none; margin-top: 8px;">
          Downloads the shared on-device AI bundle used for quizzes and summaries.
        </p>
      </div>
    </div>

    <div class="popup-section">
      <h2>Your Progress</h2>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number" id="totalVideos">0</div>
          <div class="stat-label">Videos</div>
        </div>
        <div class="stat-item">
          <div class="stat-number" id="totalQuizzes">0</div>
          <div class="stat-label">Quizzes</div>
        </div>
        <div class="stat-item">
          <div class="stat-number" id="avgScore">0%</div>
          <div class="stat-label">Avg Score</div>
        </div>
      </div>
      <div class="share-controls" style="margin-top: 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between;">
        <div class="share-scope segmented" id="shareScope">
          <button type="button" class="seg-btn active" data-scope="video">This video</button>
          <button type="button" class="seg-btn" data-scope="overall">Overall</button>
        </div>
        <button id="shareProgress" class="btn-secondary">Share Progress</button>
      </div>
    </div>

    <div class="popup-section">
      <h2>Settings</h2>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Enable LearnTube AI</div>
          <div class="setting-description">Activate quiz generation on YouTube</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="enabledToggle" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Auto Quiz</div>
          <div class="setting-description">Automatically show quizzes during videos</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="autoQuizToggle" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Final Quiz</div>
          <div class="setting-description">Show comprehensive quiz at video end</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="finalQuizToggle" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Anonymous Analytics</div>
          <div class="setting-description">Share usage data to improve LearnTube AI</div>
        </div>
        <label class="toggle">
          <input type="checkbox" id="analyticsToggle" checked>
          <span class="toggle-slider"></span>
        </label>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Questions per Segment</div>
          <div class="setting-description">Number of questions in mid-video quizzes</div>
        </div>
        <select id="questionCount" class="setting-select">
          <option value="1" selected>1 Question</option>
          <option value="2">2 Questions</option>
          <option value="3">3 Questions</option>
        </select>
      </div>


      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Theme</div>
          <div class="setting-description">Choose your preferred color theme</div>
        </div>
        <select id="themeSelect" class="setting-select">
          <option value="dark">Dark</option>
          <option value="light" selected>Light</option>
        </select>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label">Apply Theme To</div>
          <div class="setting-description">Choose where to apply the selected theme</div>
        </div>
        <div class="theme-scope segmented" id="themeScope">
          <button type="button" class="seg-btn active" data-scope="quiz-popup">Quiz Popup</button>
          <button type="button" class="seg-btn" data-scope="all-place">All Place</button>
        </div>
      </div>
    </div>

    <div class="popup-section">
      <h2>About</h2>
      <p class="about-text">
        LearnTube AI generates interactive quizzes while you watch educational videos.
        You can choose between two AI providers:
      </p>
      <ul class="about-options">
        <li><strong>On Device AI:</strong> Complete privacy with Chrome's built-in AI</li>
        <li><strong>Gemini API:</strong> Faster processing with Google's cloud AI (requires free API key)</li>
      </ul>
      <div class="about-features">
        <div class="feature-badge">Flexible AI Options</div>
        <div class="feature-badge">Privacy & Performance</div>
      </div>
    </div>

    <div class="popup-actions">
      <button id="resetButton" class="btn-test" type="button" style="background: #dc2626; color: white; border: 1px solid #dc2626;">
        Reset
      </button>
    </div>

    <div class="popup-footer">
      <p>Made with ❤️ for learners everywhere</p>
      <p><a href="https://github.com/Sumit189/LearnTube-AI" target="_blank" rel="noopener noreferrer">View project on GitHub</a></p>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>