Greasy Fork is available in English.

ChatGPT avatar

Change the ChatGPT avatar to your liking.

// ==UserScript==
// @name         ChatGPT avatar
// @namespace    Anong0u0
// @version      1.2
// @description  Change the ChatGPT avatar to your liking.
// @author       Anong0u0
// @match        https://chat.openai.com/*
// @match        https://chatgpt.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        none
// @license      Beerware
// ==/UserScript==



// Paste and change the image url here, between the "double apostrophes"
const GPT_AvatarURL = "https://pixiv.cat/102439408-1.jpg",
     User_AvatarURL = ""

// You can edit avatar size here, default is "2rem"
const  GPT_AvatarSize = "2.5rem",
      User_AvatarSize = "2.5rem";




// Don't edit below if you don't know what are you doing
const css = document.createElement("style")
css.innerHTML = `
/* user avatar */
main [data-testid="fruit-juice-profile"] > div > div {
    width: ${User_AvatarSize};
    height: ${User_AvatarSize};
    background-image: url("${User_AvatarURL}");
    background-size: cover;
}
main [data-testid="fruit-juice-profile"] > div > div img {
    width: auto;
    height: auto;
    display: ${User_AvatarURL ? "none":"block"};
}

/* GPT avatar */
main div.gizmo-bot-avatar {
    background-image: url("${GPT_AvatarURL}");
    background-size: cover;
    width: ${GPT_AvatarSize} !important;
    height: ${GPT_AvatarSize} !important;
}
main div.gizmo-bot-avatar div {background: unset}
main svg[width="41"][height="41"][viewBox="0 0 41 41"][fill="none"] {
    width: auto;
    height: auto;
    display: ${GPT_AvatarURL ? "none":"block"}
}
`
document.body.append(css)