popup.html

<!DOCTYPE html>
<html data-theme="light">
<head>
  <title>Jupyter Notebook to LLM Extractor</title>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #333333;
      --border-color: #e0e0e0;
      --primary-color: #4285f4;
      --primary-hover: #3367d6;
      --secondary-color: #f5f5f5;
      --llm-badge-color: #8c52ff;
      --success-color: #0f9d58;
      --warning-color: #f4b400;
      --error-color: #db4437;
      --muted-text: #666666;
      --card-bg: #f8f9fa;
    }

    [data-theme="dark"] {
      --bg-color: #202124;
      --text-color: #e8eaed;
      --border-color: #3c4043;
      --primary-color: #669df6;
      --primary-hover: #8ab4f8;
      --secondary-color: #303134;
      --llm-badge-color: #a78bfa;
      --success-color: #34a853;
      --warning-color: #fcc934;
      --error-color: #ea4335;
      --muted-text: #9aa0a6;
      --card-bg: #303134;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-width: 300px;
      padding: 16px;
      margin: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: background-color 0.3s, color 0.3s;
    }

    /* Header Section */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 8px;
    }

    .title-area {
      display: flex;
      flex-direction: column;
    }

    h1 {
      font-size: 18px;
      margin: 0 0 4px 0;
      display: flex;
      align-items: center;
    }

    .subtitle {
      font-size: 12px;
      color: var(--muted-text);
      margin: 0;
    }

    .llm-badge {
      display: inline-block;
      background-color: var(--llm-badge-color);
      color: white;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: bold;
      margin-left: 8px;
    }

    .theme-toggle {
      background: none;
      border: none;
      color: var(--text-color);
      cursor: pointer;
      font-size: 16px;
      padding: 4px;
    }

    /* Options Section */
    .options-section {
      margin-bottom: 12px;
    }

    .accordion {
      background-color: var(--secondary-color);
      border-radius: 4px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .accordion-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 500;
      user-select: none;
    }

    .accordion-content {
      padding: 0 12px 8px;
      display: none;
    }

    .accordion.open .accordion-content {
      display: block;
    }

    .accordion-toggle {
      font-family: monospace;
      font-size: 14px;
      width: 24px;
      text-align: center;
    }

    .checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      user-select: none;
      font-size: 13px;
    }

    /* Templates Section */
    .template-select {
      width: 100%;
      padding: 6px 8px;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background-color: var(--bg-color);
      color: var(--text-color);
      margin-bottom: 8px;
    }

    /* Button Section */
    .buttons {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    button {
      font-size: 13px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      padding: 8px 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s;
    }

    button:hover:not(:disabled) {
      background-color: var(--primary-hover);
    }

    button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .action-btn {
      flex: 1;
      font-weight: 500;
    }

    /* Status Section */
    .status {
      text-align: center;
      padding: 8px;
      border-radius: 4px;
      font-size: 13px;
      min-height: 18px;
    }

    .status.success {
      background-color: rgba(15, 157, 88, 0.1);
      color: var(--success-color);
    }

    .status.warning {
      background-color: rgba(244, 180, 0, 0.1);
      color: var(--warning-color);
    }

    .status.error {
      background-color: rgba(219, 68, 55, 0.1);
      color: var(--error-color);
    }

    /* Loading Spinner */
    .spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s linear infinite;
    }

    .loading .spinner {
      display: inline-block;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Cell Selection Mode */
    .cell-selection {
      max-height: 200px;
      overflow-y: auto;
      margin-bottom: 8px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
    }

    .cell-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-bottom: 1px solid var(--border-color);
    }

    .cell-item:last-child {
      border-bottom: none;
    }

    .cell-type {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .cell-type.code {
      background-color: rgba(66, 133, 244, 0.1);
      color: var(--primary-color);
    }

    .cell-type.markdown {
      background-color: rgba(15, 157, 88, 0.1);
      color: var(--success-color);
    }

    .cell-type.raw {
      background-color: rgba(244, 180, 0, 0.1);
      color: var(--warning-color);
    }

    .cell-preview {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
    }

    footer {
      font-size: 11px;
      color: var(--muted-text);
      text-align: center;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <!-- Header Section -->
  <div class="header">
    <div class="title-area">
      <h1>Jupyter to LLM <span class="llm-badge">AI</span></h1>
      <div class="subtitle">Extract notebook content for AI processing</div>
    </div>
    <button id="themeToggle" class="theme-toggle" title="Toggle dark mode">
      Light
    </button>
  </div>

  <!-- Extraction Options -->
  <div class="options-section">
    <div class="accordion open">
      <div class="accordion-header" data-accordion="extraction">
        <span>Extraction Options</span>
        <span class="accordion-toggle">Show</span>
      </div>
      <div class="accordion-content">
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" id="includeCode" checked> 
            Code cells
          </label>
          <label class="checkbox-label">
            <input type="checkbox" id="includeMarkdown" checked> 
            Markdown cells
          </label>
          <label class="checkbox-label">
            <input type="checkbox" id="includeRaw" checked> 
            Raw cells
          </label>
          <label class="checkbox-label">
            <input type="checkbox" id="skipEmpty" checked> 
            Skip empty cells
          </label>
        </div>
      </div>
    </div>

    <!-- Template Section -->
    <div class="accordion">
      <div class="accordion-header" data-accordion="templates">
        <span>Prompt Templates</span>
        <span class="accordion-toggle">Show</span>
      </div>
      <div class="accordion-content">
        <select id="promptTemplate" class="template-select">
          <option value="none">No template (raw content)</option>
          <option value="explain">Explain this notebook</option>
          <option value="summary">Summarize this analysis</option>
          <option value="debug">Debug this notebook</option>
          <option value="improve">Improve this code</option>
          <option value="custom">Custom template...</option>
        </select>
        <textarea id="customTemplate" style="display:none; width:100%; height:60px; margin-top:8px; resize:vertical;" 
                  placeholder="Enter your custom template. Use {{content}} where the notebook content should be inserted."></textarea>
      </div>
    </div>

    <!-- Cell Selection -->
    <div class="accordion">
      <div class="accordion-header" data-accordion="selection">
        <span>Cell Selection</span>
        <span class="accordion-toggle">Show</span>
      </div>
      <div class="accordion-content">
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input type="checkbox" id="selectionMode"> 
            Enable selection mode
          </label>
          <button id="refreshCells" style="padding: 4px 8px; background-color: var(--secondary-color); color: var(--text-color);">
            Refresh cells
          </button>
        </div>
        <div id="cellList" class="cell-selection" style="display:none;">
          <!-- Cell items will be added here dynamically -->
          <div class="cell-item">
            <input type="checkbox" checked>
            <span class="cell-type code">Code</span>
            <span class="cell-preview">Loading cells...</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="buttons">
    <button id="copyBtn" class="action-btn">
      <span>Copy to Clipboard</span>
      <span class="spinner"></span>
    </button>
    <button id="downloadBtn" class="action-btn">
      <span>Download as File</span>
      <span class="spinner"></span>
    </button>
  </div>

  <!-- Additional Debug Button -->
  <div class="buttons">
    <button id="debugBtn" style="background-color: var(--warning-color);display:none;">
      <span>Diagnose Page</span>
      <span class="spinner"></span>
    </button>
  </div>

  <!-- Status Display -->
  <div id="status" class="status">Ready to extract content</div>

  <footer>
    Optimized for LLM input  v1.1.0
  </footer>

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