Merge pull request #5 from chinkan/feature/custom-prompt

Feature/custom prompt
chinkan · Sep 12, 2024 · 050ceb4 · 050ceb4
2 parents 2603f8c + ad8ff64
commit 050ceb4
Show file tree

Hide file tree

Showing 14 changed files with 605 additions and 73 deletions.
diff --git a/.github/workflows/github-actions-pack.yml b/.github/workflows/github-actions-pack.yml
@@ -0,0 +1,27 @@
+name: Pack Chrome Extension
+
+on:
+    push:
+        branches: [main]
+    pull_request:
+        types: [closed]
+        branches: [main]
+
+jobs:
+    pack:
+        runs-on: ubuntu-latest
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+
+        steps:
+            - uses: actions/checkout@v2
+
+            - name: Pack extension
+              run: |
+                  mkdir packed-extension
+                  zip -r packed-extension/extension.zip . -x "*.git*" "packed-extension/*" "*.github/*"
+
+            - name: Upload artifact
+              uses: actions/upload-artifact@v2
+              with:
+                  name: packed-extension
+                  path: packed-extension/extension.zip
diff --git a/README.md b/README.md
@@ -4,8 +4,23 @@
 
 WizMuse is a browser extension that allows users to summarize web pages using various large language model (LLM) providers. The extension provides a user-friendly interface to extract key points and generate concise summaries of the content on any webpage.
 
+![WizMuse](/images/WizMuse1_s.jpg)
+
+## Features
+
+-   Summarize web pages with various LLM providers.
+-   Customize the summary process with different models and prompts.
+-   Copy the summary to the clipboard.
+-   Open the options page to manage models and prompts.
+
 ## Installation
 
+### Chrome Extension (Chrome Web Store)
+
+Download the latest version from the [Chrome Web Store](https://chromewebstore.google.com/detail/wizmuse/pkkbpmbapimdajbpfdccdaifnedeknlo?authuser=0&hl=zh-TW).
+
+### Local Development
+
 1. Clone the repository:
     ```bash
     git clone https://github.com/chinkan/chrome-ext-wizmuse.git
@@ -22,6 +37,12 @@ WizMuse is a browser extension that allows users to summarize web pages using va
 5. Enable "Developer mode" in the top right corner.
 6. Click on "Load unpacked" and select the project directory.
 
+## Usage
+
+1. Go to any webpage.
+2. Click on the WizMuse icon in the Chrome toolbar.
+3. The summary will be displayed in the extension popup. Simple as that! 😊
+
 ## Contribute
 
 We welcome contributions! To contribute to the project:
@@ -31,12 +52,16 @@ We welcome contributions! To contribute to the project:
 3. Make your changes and commit them.
 4. Push to your branch and create a pull request.
 
+Thanks for your contribution!
+
 ## TODO
 
 -   [x] Implement the summarization functionality for the OpenAI provider.
 -   [x] Implement the summarization functionality for the Anthropic provider.
 -   [x] Implement the summarization functionality for the Groq provider.
 -   [x] Implement the summarization functionality for the Ollama provider.
+-   [x] Implement custom prompt
+-   [x] Implement copy to clipboard
 -   [ ] Implement the share to society functionality
 -   [ ] Implement the Add to Notion functionality
 -   [ ] Improve error handling and user feedback.
@@ -50,3 +75,7 @@ This project is licensed under the GNU General Public License (GPL). You can fre
 ## Copyright
 
 Copyright (c) 2024 chinkan.ai
+
+## Special Thanks
+
+-   [Adamvleggett](https://github.com/adamvleggett) for his [drawdown](https://github.com/adamvleggett/drawdown) library.
diff --git a/background.js b/background.js
@@ -17,7 +17,7 @@ async function handleSummarize(request, sendResponse) {
             'selectedLLMIndex',
             'language',
         ]);
-        console.log('Background script received message:', result);
+        console.log('get from storage', result);
 
         if (
             !result.llmConfigs ||
@@ -35,8 +35,8 @@ async function handleSummarize(request, sendResponse) {
             defaultConfig.provider,
             defaultConfig
         );
-        const prompts = PromptFactory.getPrompt(
-            'summarize',
+        const prompts = await PromptFactory.getPrompt(
+            request.selectPromptIndex,
             request.text,
             result.language
         );

diff --git a/images/WizMuse1_s.jpg b/images/WizMuse1_s.jpg
diff --git a/images/icon128.png b/images/icon128.png
diff --git a/images/icon16.png b/images/icon16.png
diff --git a/images/icon32.png b/images/icon32.png
diff --git a/images/icon48.png b/images/icon48.png
diff --git a/manifest.json b/manifest.json
@@ -1,17 +1,24 @@
 {
     "manifest_version": 3,
     "name": "WizMuse",
-    "version": "0.1",
+    "version": "0.2",
     "description": "WizMuse is a powerful web page summarization tool. Quickly extract core content from web pages to improve reading efficiency.",
     "permissions": ["activeTab", "storage"],
     "action": {
         "default_popup": "popup.html",
         "default_icon": {
             "16": "images/icon16.png",
+            "32": "images/icon32.png",
             "48": "images/icon48.png",
             "128": "images/icon128.png"
         }
     },
+    "icons": {
+        "16": "images/icon16.png",
+        "32": "images/icon32.png",
+        "48": "images/icon48.png",
+        "128": "images/icon128.png"
+    },
     "options_page": "options.html",
     "background": {
         "service_worker": "background.js",

diff --git a/options.css b/options.css
@@ -252,6 +252,40 @@ select {
     padding: 2px;
 }
 
+#ollama-warning {
+    display: none;
+    background-color: #fff3cd;
+    border-left: 4px solid #ffc107;
+    color: #856404;
+    padding: 12px 15px;
+    border-radius: 4px;
+    margin-top: 15px;
+    font-size: 14px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: relative;
+    padding-left: 45px;
+    margin-bottom: 15px;
+}
+
+#ollama-warning::before {
+    content: '\26A0'; /* Unicode 警告符號 */
+    font-size: 24px;
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #ffc107;
+}
+
+#ollama-warning p {
+    margin: 0;
+    line-height: 1.5;
+}
+
+#ollama-warning strong {
+    color: #e65100;
+}
+
 #options-container {
     position: fixed;
     inset: 0;
@@ -371,3 +405,76 @@ select {
 .action-btn .material-icons {
     font-size: 16px;
 }
+
+.form-notice {
+    font-size: 0.9em;
+    color: #666;
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.form-notice .material-icons {
+    font-size: 1.2em;
+    margin-right: 5px;
+    color: #2196f3;
+}
+
+.form-group textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    box-sizing: border-box;
+    background-color: #fff;
+    transition: border-color 0.3s ease;
+    min-height: 150px; /* 增加最小高度 */
+    resize: vertical; /* 允許垂直調整大小 */
+}
+
+.form-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+#prompt-content {
+    font-family: monospace; /* 使用等寬字體，更適合編寫提示 */
+    line-height: 1.5; /* 增加行高，提高可讀性 */
+}
+
+/* 調整提示表格中內容列的寬度 */
+#prompts-table td:nth-child(2) {
+    width: 50%; /* 讓內容列佔據更多空間 */
+    max-width: 300px; /* 設置最大寬度 */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 調整操作按鈕列的寬度 */
+#prompts-table td:last-child {
+    width: 100px;
+    text-align: center;
+}
+
+/* 美化提示表單容器 */
+#prompt-form-container {
+    background-color: #f8f9fa;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 調整按鈕組的樣式 */
+.button-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+}
+
+.button-group button {
+    margin-left: 10px;
+}
diff --git a/options.html b/options.html
@@ -17,6 +17,7 @@
         <div id="sidebar">
             <div class="menu-item active" data-page="about">About</div>
             <div class="menu-item" data-page="options">Options</div>
+            <div class="menu-item" data-page="prompts">Prompts</div>
             <div class="menu-item" data-page="history">History</div>
         </div>
         <div id="content">
@@ -30,7 +31,7 @@ <h1>About WizMuse</h1>
                     />
                     <div class="profile-info">
                         <p
-                            ><i class="material-icons">info</i> Version：0.1
+                            ><i class="material-icons">info</i> Version：0.2
                             beta</p
                         >
                         <p
@@ -181,6 +182,9 @@ <h1>Options</h1>
                                 </label>
                             </div>
                         </div>
+                        <div id="ollama-warning" class="warning-message" style="display: none;">
+                            <p>Warning: When using Ollama, please ensure that the environment variable `Ollama_ORIGINS` is set to "*" to allow Chrome extension access.</p>
+                        </div>
                         <div class="form-group" id="api-key-container">
                             <label for="api-key">API Key：</label>
                             <input
@@ -230,20 +234,78 @@ <h1>Options</h1>
                 </div>
                 <button id="save-default">Save Config</button>
             </div>
-            <div id="history-page" style="display: none">
-                <h1>Summary History</h1>
-                <table id="history-table">
+            <div id="prompts-page" style="display: none">
+                <h1>Prompts</h1>
+                <button id="add-prompt-btn" class="fab">+</button>
+                <table id="prompts-table">
                     <thead>
                         <tr>
-                            <th>URL</th>
-                            <th>Title</th>
-                            <th>Summarized Time</th>
-                            <th>Summary</th>
+                            <th>Name</th>
+                            <th>System Prompt</th>
+                            <th>User Prompt</th>
                             <th>Actions</th>
                         </tr>
                     </thead>
                     <tbody></tbody>
                 </table>
+                <div class="form-group">
+                    <label for="default-prompt">Default Prompt：</label>
+                    <select id="default-prompt"></select>
+                </div>
+                <button id="save-default-prompt">Save Default Prompt</button>
+
+                <div id="prompt-form-container" style="display: none">
+                    <form id="prompt-form">
+                        <div class="form-group">
+                            <label for="prompt-name">Prompt Name：</label>
+                            <input
+                                id="prompt-name"
+                                type="text"
+                                placeholder="Prompt Name"
+                                required
+                            />
+                        </div>
+                        <div class="form-group">
+                            <label for="system-prompt">System Prompt：</label>
+                            <textarea
+                                id="system-prompt"
+                                placeholder="Enter your system prompt here"
+                                required
+                            ></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label for="user-prompt">User Prompt：</label>
+                            <textarea
+                                id="user-prompt"
+                                placeholder="Enter your user prompt here"
+                                required
+                            ></textarea>
+                        </div>
+                        <p class="form-notice">
+                            <i class="material-icons">info</i>
+                            Note: You can use {{content}} tag in the prompts, the system will inject the website content here.
+                        </p>
+                        <div class="form-group button-group">
+                            <button type="submit" class="primary-button">Save Prompt</button>
+                            <button type="button" id="cancel-prompt-form" class="secondary-button">Cancel</button>
+                        </div>
+                    </form>
+                </div>
+                <div id="history-page" style="display: none">
+                    <h1>Summary History</h1>
+                    <table id="history-table">
+                        <thead>
+                            <tr>
+                                <th>URL</th>
+                                <th>Title</th>
+                                <th>Summarized Time</th>
+                                <th>Summary</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
             </div>
         </div>
         <script type="module" src="options.js"></script>