Perplexity Model Selection

Adds model selection buttons to Perplexity AI using jQuery

当前为 2024-11-02 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Perplexity Model Selection
  3. // @namespace https://greasyfork.org/en/users/688917
  4. // @version 0.9
  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 = ".flex.bg-background.dark\\:bg-offsetDark.rounded-l-lg.col-start-1.row-start-2.-ml-2";
  142.  
  143. const focusAreas = ["Focus", "Academic", "Writing", "Wolfram|Alpha", "YouTube", "Reddit"];
  144. const focusSelectors = focusAreas.map(text => `div:contains("${text}")`).join(', ');
  145. const $focusElement = $(focusSelectors).closest(selector);
  146.  
  147. if (!$focusElement.length) return;
  148.  
  149. if ($focusElement.data("state") === "injected") return;
  150. $focusElement.data("state", "injected");
  151.  
  152. const aiModels = [
  153. {
  154. name: "Default",
  155. code: "turbo",
  156. },
  157. {
  158. name: "Claude 3.5 Sonnet",
  159. code: "claude2",
  160. },
  161. {
  162. name: "Sonar Large",
  163. code: "experimental",
  164. },
  165. {
  166. name: "GPT-4o",
  167. code: "gpt4o",
  168. },
  169. {
  170. name: "Claude 3 Opus",
  171. code: "claude3opus",
  172. },
  173. {
  174. name: "Sonar Huge",
  175. code: "llama_x_large",
  176. },
  177. {
  178. name: "Grok 2",
  179. code: "grok",
  180. },
  181. ];
  182.  
  183. const imageModels = [
  184. {
  185. name: "Playground v.3",
  186. code: "default",
  187. },
  188. {
  189. name: "DALL-E 3",
  190. code: "dall-e-3",
  191. },
  192. {
  193. name: "Stable Diffusion XL",
  194. code: "sdxl",
  195. },
  196. {
  197. name: "FLUX.1",
  198. code: "flux",
  199. },
  200. ];
  201.  
  202. const aiModelSelector = createModelSelectorElement("Chat Model");
  203. const imageModelSelector = createModelSelectorElement("Image Model");
  204.  
  205. let latestSettings = undefined;
  206. const getCurrentModel = () => {
  207. return latestSettings?.["default_model"];
  208. };
  209. const getCurrentImageModel = () => {
  210. return latestSettings?.["default_image_generation_model"];
  211. };
  212. const updateFromSettings = () => {
  213. fetchSettings().then((settings) => {
  214. latestSettings = settings;
  215. const aiModelCode = getCurrentModel();
  216. const aiModelName = aiModels.find((m) => m.code === aiModelCode)?.name;
  217. if (aiModelName) aiModelSelector.setModelName(aiModelName);
  218.  
  219. const imageModelCode = getCurrentImageModel();
  220. const imageModelName = imageModels.find(
  221. (m) => m.code === imageModelCode
  222. )?.name;
  223. if (imageModelName) imageModelSelector.setModelName(imageModelName);
  224. });
  225. };
  226. updateFromSettings();
  227.  
  228. const findFiberNodeWithSocket = (fiber) => {
  229. if (!fiber) return null;
  230.  
  231. if (fiber.memoizedProps && fiber.memoizedProps.socket) {
  232. return fiber;
  233. }
  234.  
  235. return (
  236. findFiberNodeWithSocket(fiber.child) ||
  237. findFiberNodeWithSocket(fiber.sibling)
  238. );
  239. };
  240.  
  241. const setModel = async (model, isImageModel) => {
  242. const el = $focusElement[0];
  243. const fiberKey = Object.keys(el).find((k) =>
  244. k.startsWith("__reactFiber")
  245. );
  246. if (!fiberKey) throw new Error("Failed to find key of React Fiber");
  247. const fiber = el[fiberKey];
  248.  
  249. const targetFiber = findFiberNodeWithSocket(fiber);
  250. if (!targetFiber)
  251. throw new Error("Failed to find fiber node with socket property");
  252.  
  253. const settingsKey = isImageModel
  254. ? "default_image_generation_model"
  255. : "default_model";
  256. return await targetFiber.memoizedProps.socket.emitWithAck(
  257. "save_user_settings",
  258. {
  259. [settingsKey]: model,
  260. source: "default",
  261. version: "2.5",
  262. }
  263. );
  264. };
  265.  
  266. aiModelSelector.$element.click(async () => {
  267. const { $element: $popover, addSelection } = createSelectionPopover(
  268. aiModelSelector.$element[0]
  269. );
  270. $("main").append($popover);
  271. const closePopover = () => {
  272. $popover.remove();
  273. $(document).off("click", closePopover);
  274. };
  275. for (const model of aiModels) {
  276. addSelection({
  277. name: model.name,
  278. onClick: async () => {
  279. await setModel(model.code, false);
  280. updateFromSettings();
  281. closePopover();
  282. },
  283. });
  284. }
  285.  
  286. setTimeout(() => {
  287. $(document).on("click", closePopover);
  288. $popover.on("click", (e) => e.stopPropagation());
  289. }, 500);
  290. });
  291.  
  292. imageModelSelector.$element.click(async () => {
  293. const { $element: $popover, addSelection } = createSelectionPopover(
  294. imageModelSelector.$element[0]
  295. );
  296. $("main").append($popover);
  297. const closePopover = () => {
  298. $popover.remove();
  299. $(document).off("click", closePopover);
  300. };
  301. for (const model of imageModels) {
  302. addSelection({
  303. name: model.name,
  304. onClick: async () => {
  305. await setModel(model.code, true);
  306. updateFromSettings();
  307. closePopover();
  308. },
  309. });
  310. }
  311.  
  312. setTimeout(() => {
  313. $(document).on("click", closePopover);
  314. $popover.on("click", (e) => e.stopPropagation());
  315. }, 500);
  316. });
  317.  
  318. $focusElement.append(aiModelSelector.$element);
  319. $focusElement.append(imageModelSelector.$element);
  320.  
  321. // Add CSS styles for responsive layout
  322. $("<style>")
  323. .prop("type", "text/css")
  324. .html(
  325. `
  326. .model-selector-wrapper {
  327. margin-right: 12px; /* Add right margin to create space between buttons */
  328. }
  329. @media (max-width: 768px) {
  330. .model-selector-wrapper {
  331. display: block;
  332. margin-right: 0;
  333. margin-bottom: 8px;
  334. }
  335. .model-selector {
  336. width: 100%;
  337. }
  338. .model-selector-text {
  339. max-width: 120px;
  340. }
  341. }
  342. `
  343. )
  344. .appendTo("head");
  345. }
  346.  
  347. function setup() {
  348. setupSelection();
  349. setInterval(() => {
  350. setupSelection();
  351. console.log("run");
  352. }, 500);
  353. }
  354. })();