Add OpenAI API integration for text summarization and API key management

Author: cs-util

index.html

@@ -8,6 +8,11 @@
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23ff0000'/%3E%3C/svg%3E" type="image/svg+xml">
   <!-- Add lamejs library -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/lame.min.js"></script>
+  <!-- Import OpenAI library -->
+  <script type="module">
+    import OpenAI from 'https://esm.sh/[email protected]?target=es2020';
+    window.OpenAI = OpenAI;
+  </script>
   <style>
     /* Base styles for dark theme */
     body {
@@ -112,6 +117,48 @@
       text-align: center;
       transition: opacity 0.5s;
     }
+
+    /* API Key section */
+    .api-key-section {
+      margin: 10px 0;
+      padding: 10px;
+      border: 1px dashed #555;
+      border-radius: 4px;
+      background: #222;
+    }
+
+    .api-key-toggle {
+      cursor: pointer;
+      color: #007bff;
+      user-select: none;
+    }
+
+    .api-key-input {
+      display: none; /* Hidden by default */
+      margin-top: 8px;
+    }
+
+    .api-key-input input {
+      width: calc(100% - 125px);
+      margin-right: 10px;
+    }
+
+    /* Summary section */
+    .summary-container {
+      margin-top: 15px;
+      padding: 10px;
+      border: 1px solid #444;
+      border-radius: 4px;
+      background: #2c2c2c;
+      display: none; /* Hidden until there's a summary */
+    }
+
+    .summary-content {
+      white-space: pre-wrap;
+      font-family: Consolas, monospace;
+      font-size: 0.9rem;
+      color: #a0e0a0;
+    }
   </style>
 </head>
 
@@ -133,20 +180,136 @@
           <option value="zh-CN">Chinese (Simplified)</option>
         </select>
       </div>
+      <button id="summarize">Summarize Text</button>
+    </div>
+
+    <!-- API Key Section -->
+    <div class="api-key-section">
+      <div class="api-key-toggle">⚙️ OpenAI API Settings (click to expand)</div>
+      <div class="api-key-input">
+        <input type="password" id="api-key" placeholder="Enter your OpenAI API key (sk-...)">
+        <button id="save-api-key">Save</button>
+      </div>
     </div>
 
     <h3>Transcription:</h3>
     <div id="transcription-container">
       <!-- The transcription element is contenteditable (editable by the user) -->
       <div id="transcription" contenteditable="true"></div>
     </div>
+
+    <!-- Summary Section -->
+    <h3 id="summary-heading" style="display:none;">Summary:</h3>
+    <div id="summary-container" class="summary-container">
+      <div id="summary-content" class="summary-content"></div>
+    </div>
   </div>
 
   <script>
     // Global variable to track recording state
     let isRecording = false;
     let exitWarningEnabled = false;
     let mp3Encoder = null;
+    let apiKey = localStorage.getItem('openai_api_key') || '';
+
+    // Initialize API key section
+    document.addEventListener('DOMContentLoaded', () => {
+      const apiKeyToggle = document.querySelector('.api-key-toggle');
+      const apiKeyInput = document.querySelector('.api-key-input');
+      const apiKeyField = document.getElementById('api-key');
+      const saveApiKeyBtn = document.getElementById('save-api-key');
+      const summarizeBtn = document.getElementById('summarize');
+      
+      // Set the saved API key if available
+      if (apiKey) {
+        apiKeyField.value = apiKey;
+      }
+
+      // Toggle API key input visibility
+      apiKeyToggle.addEventListener('click', () => {
+        apiKeyInput.style.display = apiKeyInput.style.display === 'none' ? 'block' : 'none';
+      });
+
+      // Save API key to localStorage
+      saveApiKeyBtn.addEventListener('click', () => {
+        apiKey = apiKeyField.value.trim();
+        localStorage.setItem('openai_api_key', apiKey);
+        apiKeyInput.style.display = 'none';
+        showNotification('API key saved');
+      });
+
+      // Summarize button event handler
+      summarizeBtn.addEventListener('click', async () => {
+        const transcriptionText = document.getElementById('transcription').textContent;
+        if (!transcriptionText.trim()) {
+          showNotification('No transcription text to summarize');
+          return;
+        }
+
+        if (!apiKey) {
+          showNotification('Please provide an OpenAI API key first');
+          apiKeyInput.style.display = 'block';
+          return;
+        }
+
+        await summarizeText(transcriptionText);
+      });
+    });
+
+    // Function to show a notification
+    function showNotification(message, duration = 3000) {
+      const notification = document.createElement('div');
+      notification.className = 'notification';
+      notification.textContent = message;
+      document.body.appendChild(notification);
+      
+      setTimeout(() => {
+        notification.style.opacity = '0';
+        setTimeout(() => notification.remove(), 500);
+      }, duration);
+    }
+
+    // Function to summarize text using OpenAI API
+    async function summarizeText(text) {
+      const summaryHeading = document.getElementById('summary-heading');
+      const summaryContainer = document.getElementById('summary-container');
+      const summaryContent = document.getElementById('summary-content');
+      
+      summaryHeading.style.display = 'block';
+      summaryContainer.style.display = 'block';
+      summaryContent.textContent = 'Generating summary...';
+
+      try {
+        // Create OpenAI client
+        const client = new window.OpenAI({
+          apiKey: apiKey,
+          dangerouslyAllowBrowser: true,
+        });
+
+        // Call the API
+        const response = await client.chat.completions.create({
+          model: 'gpt-3.5-turbo', // Using a less expensive model for summaries
+          messages: [
+            { 
+              role: 'system', 
+              content: 'You are a helpful assistant that summarizes text concisely.' 
+            },
+            { 
+              role: 'user', 
+              content: `Please summarize the following transcription in a clear, concise manner:\n\n${text}` 
+            }
+          ],
+          max_tokens: 500
+        });
+
+        // Display the summary
+        const summary = response.choices[0].message.content;
+        summaryContent.textContent = summary;
+      } catch (error) {
+        console.error('Error generating summary:', error);
+        summaryContent.textContent = `Error generating summary: ${error.message}`;
+      }
+    }
 
     // Check if the browser supports the required APIs
     if (!window.MediaRecorder || !(window.webkitSpeechRecognition || window.SpeechRecognition)) {