DeepRead/popup.html at main · g29times/DeepRead · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="DeepRead,深度阅读,智能解读,交互式导航,复杂研究,专业术语">
    <meta name="description" content="提供智能解读和交互式导航的专业深度阅读助手，帮助您理解复杂网页和专业术语。">
    <title>DeepRead 更专业的阅读助手</title>
    <link rel="stylesheet" href="popup-style.css">
    <style>
        body {
            width: 320px;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            padding: 10px;
        }
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #4CAF50;
            margin-right: 10px;
        }
        h1 {
            font-size: 18px;
            margin: 0;
            color: #333;
        }
        .description {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
            line-height: 1.4;
        }
        .button-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        .status {
            margin-top: 15px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
            font-size: 13px;
        }
        .footer {
            margin-top: 15px;
            font-size: 12px;
            color: #999;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">DR</div>
        <h1>DeepRead 专业阅读精灵</h1>
    </div>

    <div class="status" style="margin-top: 0;">
        <div style="display:flex; flex-direction:column; gap:8px;">
            <div>
                <div style="font-size:12px; color:#666;">
                    <a href="https://aistudio.google.com/apikey" target="_blank" rel="noreferrer">填写或获取 Gemini API Key</a>
                </div>
                <input id="dr-popup-api-key" type="password" placeholder="输入您的 API Key..." style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;" />
            </div>
            <div>
                <div style="font-size:12px; color:#555; margin-bottom:4px;">选择模型</div>
                <select id="dr-popup-model" style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;">
                    <option value="gemini-flash-latest">3.0-flash-latest/0.3/2.5</option>
                    <option value="gemini-flash-lite-latest" selected>2.5-flash-lite-latest/0.1/0.4</option>
                    <option value="gemini-3.1-flash-lite-preview">3.1-flash-lite-preview/0.25/1.5</option>
                    <option value="custom">自定义模型</option>
                </select>
                <input id="dr-popup-model-custom" type="text" placeholder="输入自定义模型名称..." style="display:none; width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px; margin-top:8px;" />
            </div>
            <div>
                <div style="font-size:12px; color:#555; margin-bottom:4px;">Thinking 思考 Level</div>
                <div style="display:flex; gap:8px; align-items:center;">
                    <input id="dr-popup-thinking" type="range" min="0" max="4" value="0" step="1" style="flex:1;" />
                    <div id="dr-popup-thinking-label" style="min-width:70px; text-align:right; font-size:12px; color:#333;">OFF</div>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:11px; color:#777; margin-top:4px;">
                    <span>OFF</span>
                    <span>MINIMAL</span>
                    <span>LOW</span>
                    <span>MEDIUM</span>
                    <span>HIGH</span>
                </div>
            </div>
            <div>
                <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                    <div style="font-size:12px; color:#555;">记忆系统</div>
                    <label style="display:flex; align-items:center; gap:6px; font-size:12px; color:#333; user-select:none;">
                        <input id="dr-popup-mem0-enabled" type="checkbox" />
                        启用
                    </label>
                </div>
                <div style="margin-top:8px;">
                    <div style="font-size:12px; color:#666;">
                        <a href="https://app.mem0.ai/dashboard/api-keys" target="_blank" rel="noreferrer">获取 Mem0 API Key</a>
                    </div>
                    <input id="dr-popup-mem0-api-key" type="password" placeholder="m0-..." style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;" />
                </div>
                <div style="display:flex; gap:8px; margin-top:8px;">
                    <div style="flex:1;">
                        <div style="font-size:12px; color:#555; margin-bottom:4px;">User ID（可选）</div>
                        <input id="dr-popup-mem0-user-id" type="text" placeholder="neo" style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;" />
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:12px; color:#555; margin-bottom:4px;">Agent ID（可选）</div>
                        <input id="dr-popup-mem0-agent-id" type="text" placeholder="deepread" style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;" />
                    </div>
                </div>
            </div>
            <div>
                <div style="font-size:12px; color:#555; margin-bottom:4px;">Feishu Webhook URL（可选）</div>
                <input id="dr-popup-feishu" type="text" placeholder="https://www.feishu.cn/flow/api/trigger-webhook/..." style="width:100%; box-sizing:border-box; padding:8px; border:1px solid #ddd; border-radius:4px;" />
            </div>
            <div style="display:flex; gap:8px;">
                <button id="dr-popup-save" style="flex:1;">保存设置</button>
                <button id="dr-popup-open-sidepanel" style="flex:1; background:#111827;">打开侧栏</button>
            </div>

        </div>
    </div>

    <!-- <div class="button-container">
        <button id="startReading">开始深度阅读（分析当前页面）</button>
        <button id="togglePanel">显示/隐藏面板（旧）</button>
    </div> -->

    <div class="status" id="status">
        状态: 准备就绪，点击"开始深度阅读"分析当前页面。
    </div>

    <div class="footer">
        DeepRead v1.0 - 让阅读更深入，理解更全面
    </div>

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