Greasy Fork 还支持 简体中文。

Perplexity Model Selection

Adds model selection buttons to Perplexity AI using jQuery

目前為 2024-06-20 提交的版本,檢視 最新版本

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