Summarize current page with the AI of your choice.

summarize-bookmarklet.js

javascript:(function() {
    var apiKey = "...";
    var apiUrl = "https://api.openai.com/v1/chat/completions";

    var data = {
        model: "gpt-4o-mini",
        messages: [
            { role: "system", content: "Summarize the given document with no longer than 300 words, using emphases, bullet points, and other formatting as appropriate. Output in both English and Chinese. If the text is Chinese, output in Chinese first and then translate to English. Otherwise, output in English and then translate to Chinese." },
            { role: "user", content: "```\n" + document.body.innerText + "\n```" }
        ]
    };

    var panel = document.createElement("div");
    Object.assign(panel.style, {
        position: "fixed",
        width: "min(75vw, 480px)",
        height: "min(75vh, 480px)",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        background: "white",
        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
        borderRadius: "8px",
        overflow: "auto",
        zIndex: "10000",
        padding: "16px",
        fontFamily: "system-ui, sans-serif",
        fontSize: "14px",
        lineHeight: "1.5",
        color: "black",
        display: "flex",
        flexDirection: "column"
    });

    var buttonContainer = document.createElement("div");
    Object.assign(buttonContainer.style, {
        display: "flex",
        justifyContent: "flex-end",
        gap: "8px",
        marginBottom: "8px"
    });

    var copyButton = document.createElement("button");
    copyButton.innerText = "COPY";
    Object.assign(copyButton.style, {
        border: "none",
        background: "transparent",
        fontSize: "16px",
        cursor: "pointer",
        display: "none" // Hide initially
    });

    var closeButton = document.createElement("button");
    closeButton.innerText = "×";
    Object.assign(closeButton.style, {
        border: "none",
        background: "transparent",
        fontSize: "20px",
        cursor: "pointer"
    });
    closeButton.onclick = function() {
        document.body.removeChild(panel);
    };

    var content = document.createElement("div");
    Object.assign(content.style, { marginTop: "8px", flex: "1", overflowY: "auto" });
    content.innerHTML = "Summarizing…";

    buttonContainer.appendChild(copyButton);
    buttonContainer.appendChild(closeButton);
    panel.appendChild(buttonContainer);
    panel.appendChild(content);
    document.body.appendChild(panel);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", apiUrl, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.setRequestHeader("Authorization", "Bearer " + apiKey);

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                var aiResponse = response.choices[0].message.content;

                copyButton.style.display = "inline-block";
                copyButton.onclick = function() {
                    navigator.clipboard.writeText(aiResponse).then(() => {
                        copyButton.innerText = "COPIED";
                        setTimeout(() => (copyButton.innerText = "COPY"), 1000);
                    }).catch(() => alert("Copy failed"));
                };

                var script = document.createElement("script");
                script.src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js";
                script.onload = function() {
                    content.innerHTML = marked.parse(aiResponse);
                };
                document.head.appendChild(script);
            } else {
                content.innerHTML = "Error: Failed to get response from API.";
            }
        }
    };

    xhr.send(JSON.stringify(data));
})();

Gemini API version

javascript:(function() {
    var apiUrl = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=GEMINI_API_KEY";
    var data = {
        contents: [
            {"role": "model", "parts":[{"text": "Summarize the given document with no longer than 300 words, using emphases, bullet points, and other formatting as appropriate. Output in both English and Chinese. If the text is Chinese, output in Chinese first and then translate to English. Otherwise, output in English and then translate to Chinese."}]},
            {"role": "user", "parts":[{"text": "```\n" + document.body.innerText + "\n```"}]}
        ]
    };

    var panel = document.createElement("div");
    Object.assign(panel.style, {
        position: "fixed",
        width: "min(75vw, 780px)",
        height: "min(75vh, 780px)",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        background: "white",
        boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
        borderRadius: "8px",
        overflow: "auto",
        zIndex: "10000",
        padding: "16px",
        fontFamily: "system-ui, sans-serif",
        fontSize: "14px",
        lineHeight: "1.5",
        color: "black",
        display: "flex",
        flexDirection: "column"
    });

    var buttonContainer = document.createElement("div");
    Object.assign(buttonContainer.style, {
        display: "flex",
        justifyContent: "flex-end",
        gap: "8px",
        marginBottom: "8px"
    });

    var copyButton = document.createElement("button");
    copyButton.innerText = "COPY";
    Object.assign(copyButton.style, {
        border: "none",
        background: "transparent",
        fontSize: "16px",
        cursor: "pointer",
        display: "none" // Hide initially
    });

    var closeButton = document.createElement("button");
    closeButton.innerText = "×";
    Object.assign(closeButton.style, {
        border: "none",
        background: "transparent",
        fontSize: "20px",
        cursor: "pointer"
    });
    closeButton.onclick = function() {
        document.body.removeChild(panel);
    };

    var content = document.createElement("div");
    Object.assign(content.style, { marginTop: "8px", flex: "1", overflowY: "auto" });
    content.innerHTML = "Summarizing…";

    buttonContainer.appendChild(copyButton);
    buttonContainer.appendChild(closeButton);
    panel.appendChild(buttonContainer);
    panel.appendChild(content);
    document.body.appendChild(panel);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", apiUrl, true);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                var response = JSON.parse(xhr.responseText);
                var aiResponse = response.candidates[0].content.parts[0].text;

                copyButton.style.display = "inline-block";
                copyButton.onclick = function() {
                    navigator.clipboard.writeText(aiResponse).then(() => {
                        copyButton.innerText = "COPIED";
                        setTimeout(() => (copyButton.innerText = "COPY"), 1000);
                    }).catch(() => alert("Copy failed"));
                };

                var script = document.createElement("script");
                script.src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js";
                script.onload = function() {
                    content.innerHTML = marked.parse(aiResponse);
                };
                document.head.appendChild(script);
            } else {
                content.innerHTML = "Error: Failed to get response from API.";
            }
        }
    };

    xhr.send(JSON.stringify(data));
})();