☰

gpt-helper

easy tool

// ==UserScript==
// @name         gpt-helper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  easy tool
// @author       skymilong
// @match           *://**/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 响应文本字符串
    const respnoseText = "";

    // API的终端URL
    const endpoint = 'https://api.openai.com/v1/chat/completions';

    // 创建并添加CSS样式和HTML元素到文档中
    createBody();

    // 绑定事件监听器到元素
    bindEventListeners();

    function createBody() {
        // 添加CSS样式到文档头部
        const style = document.createElement('style');
        style.innerHTML = `
            #chatgpt-helper {
                position: fixed;
                top: 10px;
                right: 10px;
                z-index: 9999;
                background-color: white;
                border: 1px solid gray;
                padding: 10px;
                cursor: move;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                height: 50%;
            }

            #chatgpt-helper input {
                width: 100%;
                margin-bottom: 10px;
            }

            #chatgpt-helper textarea {
                width: 100%;
                flex: 1;
                overflow-y: auto;
                margin-bottom: 10px;
            }

            #chatgpt-helper button {
                width: 100%;
            }
        `;
        document.head.appendChild(style);

        // 创建并添加元素到文档主体
        const container = document.createElement('div');
        container.id = 'chatgpt-helper';
        container.innerHTML = `
            <input type="text" id="sky-api-key" placeholder="API Key">
            <textarea id="sky-output" rows="5" placeholder="Output" readonly></textarea>
            <input type="text" id="sky-input" placeholder="Input">
            <button id="submit-btn">Submit</button>
        `;
        document.body.appendChild(container);

        // 创建并添加提问按钮到文档主体
        const questionBtn = document.createElement('button');
        questionBtn.id = "sky-ask";
        questionBtn.innerText = '提问';
        questionBtn.style.position = 'absolute';
        questionBtn.style.zIndex = '999';
        questionBtn.style.display = 'none'; // 初始状态隐藏按钮
        document.body.appendChild(questionBtn);
    }

    function bindEventListeners() {
        const container = document.getElementById('chatgpt-helper');
        const apiKeyInput = document.getElementById('sky-api-key');
        const userInput = document.getElementById('sky-input');
        const submitBtn = document.getElementById('submit-btn');
        const outputTextarea = document.getElementById('sky-output');
        const questionBtn = document.getElementById('sky-ask');

        let isDragging = false;
        let startX = 0;
        let startY = 0;
        let initialX = 0;
        let initialY = 0;
        let selectedText = ''; // 存储选中的文本

        // 添加事件监听器到容器以使其可以拖动
        container.addEventListener('mousedown', (event) => {
            if (event.target == container) {
                startX = event.clientX;
                startY = event.clientY;
                initialX = container.offsetLeft;
                initialY = container.offsetTop;
                isDragging = true;
            }
        });

        container.addEventListener('mouseup', (event) => {
            isDragging = false;
        });

        container.addEventListener('mousemove', (event) => {
            if (isDragging) {
                const dx = event.clientX - startX;
                const dy = event.clientY - startY;
                container.style.left = `${initialX + dx}px`;
                container.style.top = `${initialY + dy}px`;
            }
        });

        // 添加点击事件监听器到提交按钮
        submitBtn.addEventListener('click', async () => {
            outputTextarea.value = outputTextarea.value + '\n' + 'user:' + userInput.value + '\n';
            interactWithAPI(apiKeyInput.value, userInput.value);
        });

        // 添加鼠标抬起事件监听器到文档
        document.addEventListener('mouseup', (event) => {
            const selection = window.getSelection();
            selectedText = selection.toString().trim(); // 获取选中的文本并去除首尾空格

            if (selectedText !== '') {
                questionBtn.style.top = `${event.pageY}px`;
                questionBtn.style.left = `${event.pageX}px`;
                questionBtn.style.display = 'block'; // 显示按钮
            } else {
                questionBtn.style.display = 'none'; // 隐藏按钮
            }
        });

        // 添加点击事件监听器到提问按钮
        questionBtn.addEventListener('click', () => {
            userInput.value = selectedText;
            selectedText = "";
            questionBtn.style.display = 'none'; // 点击后隐藏按钮
        });
    }

    // 与API进行交互并处理响应
    async function interactWithAPI(apiKey, userInputValue) {
        const outputTextarea = document.getElementById('sky-output');

        try {
            const data = {
                model: 'gpt-3.5-turbo',
                messages: [
                    { role: 'system', content: 'You are a helpful assistant.' },
                    { role: 'user', content: userInputValue }
                ]
            };

            const headers = {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${apiKey}`
            };

            const response = await fetch(endpoint, {
                method: 'POST',
                headers: headers,
                body: JSON.stringify(data)
            });

            if (response.ok) {
                const data = await response.json();
                // 更新输出文本区域的内容
                outputTextarea.value = outputTextarea.value + '\n' + 'gpt:' + data.choices[0].message.content  + '\n';
            } else {
                // 处理错误响应
                throw new Error('API request failed');
            }
        } catch (error) {
            // 处理异常或网络错误
            console.error(error);
            // 更新输出文本区域的内容或显示错误消息
            outputTextarea.value = outputTextarea.value + '\n' + 'gpt:Error occurred. Please try again.\n';
        }
    }
})();