codelearner/options.html at main · tpC529/codelearner · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>LearnByHover Settings</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 500px;
    }
    h1 {
      color: #333;
      font-size: 24px;
    }
    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
      color: #555;
    }
    input[type="text"] {
      width: 100%;
      padding: 8px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    select {
      width: 100%;
      padding: 8px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    button {
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    button:hover {
      background: #45a049;
    }
    .status {
      margin-top: 10px;
      color: green;
      font-weight: bold;
    }
    .info {
      margin-top: 20px;
      padding: 10px;
      background: #f0f0f0;
      border-radius: 4px;
      font-size: 14px;
      color: #666;
    }
    .backend-settings {
      display: none;
      margin-top: 15px;
      padding: 15px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>LearnByHover Settings</h1>

  <div class="info" style="margin-top: 0; background: #e3f2fd; border-left: 4px solid #2196F3;">
    <strong>✨ New: Browser-Based AI!</strong><br>
    The extension now uses AI models running directly in your browser.<br>
    No Python backend required! Just install and use.
  </div>

  <label for="inferenceMode">Inference Mode:</label>
  <select id="inferenceMode">
    <option value="browser">Browser-Based (Recommended - No setup required)</option>
    <option value="backend">Backend Mode (Legacy - Requires Python + Ollama)</option>
  </select>

  <div class="info">
    <strong>Browser-Based Mode:</strong><br>
    • No installation required<br>
    • Faster on modern GPUs<br>
    • Complete privacy (all processing in browser)<br>
    • Works offline after first model download<br>
    <br>
    <strong>Backend Mode:</strong><br>
    • Requires Python backend running on localhost<br>
    • Uses Ollama with moondream:1.8b model<br>
    • Only use if you prefer the old setup
  </div>

  <label for="quickMode">
    <input type="checkbox" id="quickMode"> Enable Quick Mode (Text Extraction)
  </label>

  <div class="info">
    <strong>Quick Mode:</strong><br>
    • Automatically detects code blocks and extracts text directly<br>
    • Much faster than image processing<br>
    • Uses lightweight text LLM for explanations<br>
    • Fallback to image mode for non-code content
  </div>

  <label for="selectionMode">Selection Mode:</label>
  <select id="selectionMode">
    <option value="shift-drag">Shift + Drag</option>
    <option value="click-drag">Click + Drag</option>
  </select>

  <div class="info">
    <strong>Selection Mode:</strong><br>
    • <strong>Shift + Drag:</strong> Hold Shift and drag to select area<br>
    • <strong>Click + Drag:</strong> Click and drag to select area (without Shift)
  </div>
    <label for="backendUrl">Backend URL:</label>
    <input type="text" id="backendUrl" placeholder="http://127.0.0.1:8000">

    <div class="info" style="margin-top: 10px;">
      <strong>Note:</strong> Make sure your backend server is running at the specified URL.
    </div>
  </div>

  <button id="save">Save Settings</button>
  <div class="status" id="status"></div>

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