☰

t3.chat Temperature Slider

Adds a dark-mode temperature slider on t3.chat that sets localStorage 'temperature' between 0 and 1.99 (default 0.6)

  1. // ==UserScript==
  2. // @name         t3.chat Temperature Slider
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Adds a dark-mode temperature slider on t3.chat that sets localStorage 'temperature' between 0 and 1.99 (default 0.6)
  6. // @author       wearifulpoet
  7. // @match        *://t3.chat/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Inject custom CSS for dark mode styling and centered slider thumb
  16.     var style = document.createElement('style');
  17.     style.textContent = `
  18.     /* Container styling */
  19.     #temp-slider-container {
  20.         position: fixed;
  21.         top: 10px;
  22.         right: 10px;
  23.         background-color: #333;
  24.         padding: 10px;
  25.         border-radius: 5px;
  26.         z-index: 9999;
  27.         color: white;
  28.         font-family: sans-serif;
  29.         display: flex;
  30.         align-items: center;
  31.     }
  32.     /* Slider styling */
  33.     #temp-slider-container input[type="range"] {
  34.         -webkit-appearance: none;
  35.         width: 150px;
  36.         margin-left: 10px;
  37.         background: transparent;
  38.     }
  39.     /* WebKit Thumb */
  40.     #temp-slider-container input[type="range"]::-webkit-slider-thumb {
  41.         -webkit-appearance: none;
  42.         height: 20px;
  43.         width: 20px;
  44.         border-radius: 50%;
  45.         background: #666;
  46.         cursor: pointer;
  47.         margin-top: -8px; /* Adjust to center the thumb */
  48.     }
  49.     /* WebKit Track */
  50.     #temp-slider-container input[type="range"]::-webkit-slider-runnable-track {
  51.         height: 5px;
  52.         background: #555;
  53.     }
  54.     /* Firefox Thumb */
  55.     #temp-slider-container input[type="range"]::-moz-range-thumb {
  56.         height: 20px;
  57.         width: 20px;
  58.         border-radius: 50%;
  59.         background: #666;
  60.         cursor: pointer;
  61.         margin-top: -8px; /* Adjust to center the thumb */
  62.     }
  63.     /* Firefox Track */
  64.     #temp-slider-container input[type="range"]::-moz-range-track {
  65.         height: 5px;
  66.         background: #555;
  67.     }
  68.     `;
  69.     document.head.appendChild(style);
  70.  
  71.     // Create the container for the slider
  72.     var container = document.createElement('div');
  73.     container.id = 'temp-slider-container';
  74.  
  75.     // Create a label for the temperature
  76.     var label = document.createElement('span');
  77.     label.textContent = 'Temperature: ';
  78.     container.appendChild(label);
  79.  
  80.     // Create a span to display the current value
  81.     var valueDisplay = document.createElement('span');
  82.     valueDisplay.textContent = '1.0';
  83.     container.appendChild(valueDisplay);
  84.  
  85.     // Create the slider element
  86.     var slider = document.createElement('input');
  87.     slider.type = 'range';
  88.     slider.min = '0';
  89.     slider.max = '1.99';
  90.     slider.step = '0.1';
  91.     slider.value = '0.6';
  92.     container.appendChild(slider);
  93.  
  94.     // Append the container to the body
  95.     document.body.appendChild(container);
  96.  
  97.     // Set the initial local storage value for temperature
  98.     localStorage.setItem('temperature', slider.value);
  99.  
  100.     // Update the display and local storage when the slider is moved
  101.     slider.addEventListener('input', function() {
  102.         var temp = slider.value;
  103.         valueDisplay.textContent = temp;
  104.         localStorage.setItem('temperature', temp);
  105.     });
  106. })();