google-question-helper/sidepanel.html at main · TonyNa-code/google-question-helper · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>搜题学习助手</title>
    <link rel="stylesheet" href="sidepanel.css" />
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <div>
          <h1>搜题学习助手</h1>
          <p>识别当前网页、选中文字或粘贴题目，直接在这里用 DeepSeek 看讲解。</p>
        </div>
        <button id="closeOverlayButton" class="icon-button hidden" type="button" title="关闭" aria-label="关闭">
          ×
        </button>
        <button id="settingsToggle" class="icon-button" type="button" title="设置" aria-label="设置">
          ⚙
        </button>
      </header>

      <section id="settingsPanel" class="settings-panel hidden" aria-label="接口设置">
        <label class="field">
          <span>DeepSeek API Key</span>
          <input id="apiKeyInput" type="password" autocomplete="off" placeholder="sk-..." />
        </label>
        <label class="field">
          <span>模型</span>
          <select id="modelInput">
            <option value="deepseek-v4-flash">deepseek-v4-flash（推荐，快）</option>
            <option value="deepseek-v4-pro">deepseek-v4-pro（更强）</option>
          </select>
        </label>
        <p class="hint">Key 只保存在你的浏览器本地，用于直接请求 DeepSeek API。</p>
        <button id="saveSettingsButton" class="secondary-button" type="button">保存设置</button>
      </section>

      <section class="compose-panel" aria-label="题目输入">
        <div class="mode-row" role="group" aria-label="讲解模式">
          <button class="mode-button selected" type="button" data-mode="explain">详细讲解</button>
          <button class="mode-button" type="button" data-mode="short">简洁答案</button>
          <button class="mode-button" type="button" data-mode="hint">只给提示</button>
        </div>

        <label class="field">
          <span>题目</span>
          <textarea id="questionInput" rows="9" placeholder="点“搜题：框选并讲解”，然后在网页上拖动框选题目区域；也可以选中文字、手动粘贴或上传图片识别。"></textarea>
        </label>

        <div class="button-grid">
          <button id="captureAndAnswerButton" class="secondary-button" type="button">搜题：框选并讲解</button>
          <button id="captureScreenButton" class="secondary-button" type="button">框选识别文字</button>
        </div>

        <div class="button-grid">
          <button id="fullScreenCaptureButton" class="secondary-button" type="button">整屏识别备用</button>
          <button id="pullSelectionButton" class="secondary-button" type="button">抓取选中文字</button>
        </div>

        <div class="button-grid">
          <label class="file-button" for="imageInput">拍照/上传识别</label>
          <input id="imageInput" type="file" accept="image/*" capture="environment" />
          <button id="pasteButton" class="secondary-button" type="button">读取剪贴板</button>
        </div>

        <p id="ocrStatus" class="hint"></p>

        <button id="answerButton" class="primary-button" type="button">开始讲解</button>
      </section>

      <section class="answer-panel" aria-label="解答结果">
        <div class="answer-header">
          <h2>解答</h2>
          <div class="answer-actions">
            <button id="copyButton" class="ghost-button" type="button">复制</button>
            <button id="clearButton" class="ghost-button" type="button">清空</button>
          </div>
        </div>
        <div id="status" class="status" role="status"></div>
        <article id="answerOutput" class="answer-output"></article>
      </section>
    </main>

    <script src="vendor/tesseract/tesseract.min.js"></script>
    <script src="sidepanel.js"></script>
  </body>
</html>