Perplexity Model Selection

Adds model selection buttons to Perplexity AI using jQuery

当前为 2024-05-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Perplexity Model Selection
  3. // @namespace https://greasyfork.org/en/users/688917
  4. // @version 0.4
  5. // @description Adds model selection buttons to Perplexity AI using jQuery
  6. // @author dpgc, lyh16, mall-fluffy-bongo, RoyRiv3r
  7. // @match https://www.perplexity.ai/*
  8. // @license MIT
  9. // @run-at document-end
  10. // ==/UserScript==
  11.  
  12. (function () {
  13. "use strict";
  14.  
  15. // Check if jQuery is loaded on the page
  16. if (typeof jQuery === "undefined") {
  17. var script = document.createElement("script");
  18. script.src =
  19. "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
  20. script.type = "text/javascript";
  21. document.getElementsByTagName("head")[0].appendChild(script);
  22.  
  23. script.onload = function () {
  24. setup();
  25. };
  26. } else {
  27. setup();
  28. }
  29.  
  30. function createModelSelectorElement(buttonText) {
  31. var $button = $("<button/>", {
  32. type: "button",
  33. class:
  34. "model-selector md:hover:bg-offsetPlus text-textOff dark:text-textOffDark md:hover:text-textMain dark:md:hover:bg-offsetPlusDark dark:md:hover:text-textMainDark font-sans focus:outline-none outline-none outline-transparent transition duration-300 ease-in-out font-sans select-none items-center relative group/button justify-center text-center items-center rounded-full cursor-point active:scale-95 origin-center whitespace-nowrap inline-flex text-sm px-2 font-medium h-8",
  35. });
  36.  
  37. const $svg = $(`
  38. <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bars-filter" class="svg-inline--fa fa-bars-filter fa-fw fa-1x mr-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM64 248c0-13.3 10.7-24 24-24H360c13.3 0 24 10.7 24 24s-10.7 24-24 24H88c-13.3 0-24-10.7-24-24zM288 408c0 13.3-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24h80c13.3 0 24 10.7 24 24z"></path></svg>
  39. `);
  40. var $textDiv = $(
  41. `<div class="model-selector-text text-align-center relative truncate">${buttonText}</div>`
  42. );
  43. var $buttonContentDiv = $("<div/>", {
  44. class: "flex items-center leading-none justify-center gap-1",
  45. })
  46. .append($svg)
  47. .append($textDiv);
  48.  
  49. $button.append($buttonContentDiv);
  50. var $wrapperDiv = $('<div class="model-selector-wrapper mr-2"/>').append(
  51. $("<span/>").append($button)
  52. );
  53.  
  54. return {
  55. $element: $wrapperDiv,
  56. setModelName: (modelName) => {
  57. // $textDiv.text(`${buttonText} (${modelName})`);
  58. $textDiv.text(`${modelName} `);
  59. },
  60. };
  61. }
  62.  
  63. function createSelectionPopover(sourceElement) {
  64. const createSelectionElement = (input) => {
  65. const { name, onClick } = input;
  66. const $element = $(`
  67. <div class="md:h-full">
  68. <div class="md:h-full">
  69. <div class="relative cursor-pointer md:hover:bg-offsetPlus py-md px-sm md:p-sm rounded md:hover:dark:bg-offsetPlusDark transition-all duration-300 md:h-full -ml-sm md:ml-0 select-none rounded">
  70. <div class="flex items-center justify-between relative">
  71. <div class="flex items-center gap-x-xs default font-sans text-sm font-medium text-textMain dark:text-textMainDark selection:bg-superDuper selection:text-textMain">
  72. <span>${name}</span>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. `);
  79.  
  80. $element.click(onClick);
  81. return $element;
  82. };
  83.  
  84. const popoverHTML = `<div class="flex justify-center items-center">
  85. <div class="ease-in-out duration-150 transition">
  86. <div class="absolute left-0 top-0 z-30">
  87. <div data-tag="popper" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto;">
  88. <div class="border animate-in ease-in-out fade-in zoom-in-95 duration-150 rounded shadow-sm p-xs border-borderMain/50 ring-borderMain/50 divide-borderMain/50 dark:divide-borderMainDark/50 dark:ring-borderMainDark/50 dark:border-borderMainDark/50 bg-background dark:bg-backgroundDark">
  89. <div data-tag="menu" class="min-w-[160px] max-w-[250px] border-borderMain/50 ring-borderMain/50 divide-borderMain/50 dark:divide-borderMainDark/50 dark:ring-borderMainDark/50 dark:border-borderMainDark/50 bg-transparent">
  90. <!-- Put elements here -->
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>`;
  97.  
  98. const $popover = $(popoverHTML);
  99. const $popper = $popover.find('[data-tag="popper"]');
  100. const $menuContaienr = $popover.find('[data-tag="menu"]');
  101.  
  102. if (sourceElement) {
  103. const { top, left, width, height } =
  104. sourceElement.getBoundingClientRect();
  105. const offset = 10;
  106. const popperWidth = $popper.outerWidth();
  107. $popper.css(
  108. "transform",
  109. `translate(${left + (width + popperWidth * 2)}px, ${
  110. top + height + offset
  111. }px)`
  112. );
  113. }
  114.  
  115. return {
  116. $element: $popover,
  117. addSelection: (input) => {
  118. const $selection = createSelectionElement(input);
  119. $menuContaienr.append($selection);
  120. },
  121. };
  122. }
  123.  
  124. async function fetchSettings() {
  125. const url = "https://www.perplexity.ai/p/api/v1/user/settings";
  126. const response = await fetch(url);
  127. if (!response.ok) throw new Error("Failed to fetch settings");
  128. return await response.json();
  129. }
  130.  
  131. function setupSelection() {
  132. let selector = "";
  133. // const currentURL = window.location.href;
  134. // if (currentURL === 'https://www.perplexity.ai/') {
  135. // selector = '.flex.bg-background.dark\\:bg-offsetDark.rounded-l-lg.col-start-1.row-start-2.-ml-2';
  136. // } else if (currentURL.startsWith('https://www.perplexity.ai/search/')) {
  137. // selector = '.pointer-events-none.fixed.z-10.grid-cols-12.gap-xl.px-sm.py-sm.md\\:bottom-lg.md\\:grid.md\\:px-0.bottom-\\[64px\\].border-borderMain\\/50.ring-borderMain\\/50.divide-borderMain\\/50.dark\\:divide-borderMainDark\\/50.dark\\:ring-borderMainDark\\/50.dark\\:border-borderMainDark\\/50.bg-transparent';
  138. // } else {
  139. // return;
  140. // }
  141. selector =
  142. ".flex.bg-background.dark\\:bg-offsetDark.rounded-l-lg.col-start-1.row-start-2.-ml-2";
  143.  
  144. const $focusElement = $('div:contains("Focus")').closest(selector);
  145. if (!$focusElement.length) return;
  146.  
  147. if ($focusElement.data("state") === "injected") return;
  148. $focusElement.data("state", "injected");
  149.  
  150. const aiModels = [
  151. {
  152. name: "Default",
  153. code: "turbo",
  154. },
  155. {
  156. name: "Sonar Large 32K",
  157. code: "experimental",
  158. },
  159. {
  160. name: "GPT-4o",
  161. code: "gpt4o",
  162. },
  163. {
  164. name: "GPT-4 Turbo",
  165. code: "gpt4",
  166. },
  167. {
  168. name: "Claude 3 Opus",
  169. code: "claude3opus",
  170. },
  171. {
  172. name: "Claude 3 Sonnet",
  173. code: "claude2",
  174. },
  175. ];
  176.  
  177. const imageModels = [
  178. {
  179. name: "Playground v.2.5",
  180. code: "default",
  181. },
  182. {
  183. name: "DALL-E 3",
  184. code: "dall-e-3",
  185. },
  186. {
  187. name: "Stable Diffusion XL",
  188. code: "sdxl",
  189. },
  190. ];
  191.  
  192. const aiModelSelector = createModelSelectorElement("Chat Model");
  193. const imageModelSelector = createModelSelectorElement("Image Model");
  194.  
  195. let latestSettings = undefined;
  196. const getCurrentModel = () => {
  197. return latestSettings?.["default_model"];
  198. };
  199. const getCurrentImageModel = () => {
  200. return latestSettings?.["default_image_generation_model"];
  201. };
  202. const updateFromSettings = () => {
  203. fetchSettings().then((settings) => {
  204. latestSettings = settings;
  205. const aiModelCode = getCurrentModel();
  206. const aiModelName = aiModels.find((m) => m.code === aiModelCode)?.name;
  207. if (aiModelName) aiModelSelector.setModelName(aiModelName);
  208.  
  209. const imageModelCode = getCurrentImageModel();
  210. const imageModelName = imageModels.find(
  211. (m) => m.code === imageModelCode
  212. )?.name;
  213. if (imageModelName) imageModelSelector.setModelName(imageModelName);
  214. });
  215. };
  216. updateFromSettings();
  217.  
  218. const findFiberNodeWithSocket = (fiber) => {
  219. if (!fiber) return null;
  220.  
  221. if (fiber.memoizedProps && fiber.memoizedProps.socket) {
  222. return fiber;
  223. }
  224.  
  225. return (
  226. findFiberNodeWithSocket(fiber.child) ||
  227. findFiberNodeWithSocket(fiber.sibling)
  228. );
  229. };
  230.  
  231. const setModel = async (model, isImageModel) => {
  232. const el = $focusElement[0];
  233. const fiberKey = Object.keys(el).find((k) =>
  234. k.startsWith("__reactFiber")
  235. );
  236. if (!fiberKey) throw new Error("Failed to find key of React Fiber");
  237. const fiber = el[fiberKey];
  238.  
  239. const targetFiber = findFiberNodeWithSocket(fiber);
  240. if (!targetFiber)
  241. throw new Error("Failed to find fiber node with socket property");
  242.  
  243. const settingsKey = isImageModel
  244. ? "default_image_generation_model"
  245. : "default_model";
  246. return await targetFiber.memoizedProps.socket.emitWithAck(
  247. "save_user_settings",
  248. {
  249. [settingsKey]: model,
  250. source: "default",
  251. version: "2.5",
  252. }
  253. );
  254. };
  255.  
  256. aiModelSelector.$element.click(async () => {
  257. const { $element: $popover, addSelection } = createSelectionPopover(
  258. aiModelSelector.$element[0]
  259. );
  260. $("main").append($popover);
  261. const closePopover = () => {
  262. $popover.remove();
  263. $(document).off("click", closePopover);
  264. };
  265. for (const model of aiModels) {
  266. addSelection({
  267. name: model.name,
  268. onClick: async () => {
  269. await setModel(model.code, false);
  270. updateFromSettings();
  271. closePopover();
  272. },
  273. });
  274. }
  275.  
  276. setTimeout(() => {
  277. $(document).on("click", closePopover);
  278. $popover.on("click", (e) => e.stopPropagation());
  279. }, 500);
  280. });
  281.  
  282. imageModelSelector.$element.click(async () => {
  283. const { $element: $popover, addSelection } = createSelectionPopover(
  284. imageModelSelector.$element[0]
  285. );
  286. $("main").append($popover);
  287. const closePopover = () => {
  288. $popover.remove();
  289. $(document).off("click", closePopover);
  290. };
  291. for (const model of imageModels) {
  292. addSelection({
  293. name: model.name,
  294. onClick: async () => {
  295. await setModel(model.code, true);
  296. updateFromSettings();
  297. closePopover();
  298. },
  299. });
  300. }
  301.  
  302. setTimeout(() => {
  303. $(document).on("click", closePopover);
  304. $popover.on("click", (e) => e.stopPropagation());
  305. }, 500);
  306. });
  307.  
  308. $focusElement.append(aiModelSelector.$element);
  309. $focusElement.append(imageModelSelector.$element);
  310.  
  311. // Add CSS styles for responsive layout
  312. $("<style>")
  313. .prop("type", "text/css")
  314. .html(
  315. `
  316. .model-selector-wrapper {
  317. margin-right: 12px; /* Add right margin to create space between buttons */
  318. }
  319. @media (max-width: 768px) {
  320. .model-selector-wrapper {
  321. display: block;
  322. margin-right: 0;
  323. margin-bottom: 8px;
  324. }
  325. .model-selector {
  326. width: 100%;
  327. }
  328. .model-selector-text {
  329. max-width: 120px;
  330. }
  331. }
  332. `
  333. )
  334. .appendTo("head");
  335. }
  336.  
  337. function setup() {
  338. setupSelection();
  339. setInterval(() => {
  340. setupSelection();
  341. console.log("run");
  342. }, 500);
  343. }
  344. })();