Add a "Selenized" color scheme and width adjustment option in prefs #30

jp-x-g · 2024-02-08T23:30:50Z

This adds an additional color scheme, Selenized (which is essentially Solarized with some contrast enhancements). It also formats some of the whitespace in the properties for color schemes, which I found useful when going through and modifying this one, and would probably be useful for the rest as well.

Also adds prefs option to change width of the text box from default of 35em

test adding a new color scheme

!

test test test

…ce in color schemes

Add an option to the popup preferences window that allows adjusting the width of the main prompt/completion container; buttons allow increase/decrease by 1em or 5em at a time.

jp-x-g · 2024-02-09T02:58:11Z

Also added an option in the preferences menu for the width of the prompt box; default is 35em, but now it can be widened or slimmed by clicking kawaii buttons (either 1em at a time or 5em).

lmg-anon · 2024-02-09T05:48:37Z

mikupad.html

 html.nockoffAI body {
-	background: var(--color-prompt-area)
+	background:            var(--color-prompt-area)
+}
+html.selenized {
+	---color-bg-dark:     #103C48;
+	--color-bg:           #103C48;
+	--color-text:         #CAD8D9;
+	--color-base-0:       #CAD8D9;
+	--color-base-10:      color-mix(in oklch, var(--color-base-100) 10%, var(--color-base-0));
+	--color-base-20:      color-mix(in oklch, var(--color-base-100) 20%, var(--color-base-0));
+	--color-base-30:      color-mix(in oklch, var(--color-base-100) 30%, var(--color-base-0));
+	--color-base-40:      color-mix(in oklch, var(--color-base-100) 40%, var(--color-base-0));
+	--color-base-50:      color-mix(in oklch, var(--color-base-100) 50%, var(--color-base-0));
+	--color-base-60:      color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-0));
+	--color-base-70:      color-mix(in oklch, var(--color-base-100) 70%, var(--color-base-0));
+	--color-base-80:      color-mix(in oklch, var(--color-base-100) 80%, var(--color-base-0));
+	--color-base-90:      color-mix(in oklch, var(--color-base-100) 90%, var(--color-base-0));
+	--color-base-100:     #103C48;
+	--color-base-150:     #081e24;
+	--color-dark:         var(--color-base-100);
+	--color-light:        #CAD8D9;
+	--color-input:        #FA5750;
+	--color-sidebar:      var(--color-base-100);
+	--color-prompt-area:  #CAD8D9;
+	--color-hover:        #4695F7;
+	--color-button:       #75B938;
+	--color-disabled:     #72898F;
+	--color-button-hover: #DBB32D;
+
+	--token-prob-box:     #FF665C;
+
+	font-family:           "Source Sans Pro", "Helvetica Neue", sans-serif;
+	font-size:             15.5px;
+
+	accent-color:          var(--color-base-90);
+	background:            var(--color-bg-dark);
+	color:                 var(--color-base-0);
+	color-scheme:          dark;
+}
+
+html.selenized body {
+	background:            var(--color-base-150)
+}
+
+html.selenized #sidebar {
+	background:            var(--color-base-100)
 }

 html.monospace-dark {
-	---color-bg-dark: #282833;
-	--color-bg: #202020;
-	--color-text: #bababa;
-	--color-base-0: oklch(77.65% 0.0752 285.22);
-	--color-base-10: color-mix(in oklch, var(--color-base-100) 90%, var(--color-base-0));
-	--color-base-20: color-mix(in oklch, var(--color-base-100) 80%, var(--color-base-0));
-	--color-base-30: color-mix(in oklch, var(--color-base-100) 70%, var(--color-base-0));
-	--color-base-40: color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-0));
-	--color-base-50: color-mix(in oklch, var(--color-base-100) 50%, var(--color-base-0));
-	--color-base-60: color-mix(in oklch, var(--color-base-100) 40%, var(--color-base-0));
-	--color-base-70: color-mix(in oklch, var(--color-base-100) 30%, var(--color-base-0));
-	--color-base-80: color-mix(in oklch, var(--color-base-100) 20%, var(--color-base-0));
-	--color-base-90: color-mix(in oklch, var(--color-base-100) 10%, var(--color-base-0));
-	--color-base-100: oklch(24.28% 0.015 285.22);
-	--color-dark: var(--color-base-100);
-	--color-light: var(--color-base-0);
-	--token-prob-box: #4a4a4a;
-
-	font-family: monospace;
-	font-size: 15px;
-
-	accent-color: var(--color-base-30);
-	background: var(--color-bg-dark);
-	color: var(--color-base-0);
-	color-scheme: dark;
+	---color-bg-dark:     #282833;
+	--color-bg:           #202020;
+	--color-text:         #bababa;
+	--color-base-0:       oklch(77.65% 0.0752 285.22);
+	--color-base-10:      color-mix(in oklch, var(--color-base-100) 90%, var(--color-base-0));
+	--color-base-20:      color-mix(in oklch, var(--color-base-100) 80%, var(--color-base-0));
+	--color-base-30:      color-mix(in oklch, var(--color-base-100) 70%, var(--color-base-0));
+	--color-base-40:      color-mix(in oklch, var(--color-base-100) 60%, var(--color-base-0));
+	--color-base-50:      color-mix(in oklch, var(--color-base-100) 50%, var(--color-base-0));
+	--color-base-60:      color-mix(in oklch, var(--color-base-100) 40%, var(--color-base-0));
+	--color-base-70:      color-mix(in oklch, var(--color-base-100) 30%, var(--color-base-0));
+	--color-base-80:      color-mix(in oklch, var(--color-base-100) 20%, var(--color-base-0));
+	--color-base-90:      color-mix(in oklch, var(--color-base-100) 10%, var(--color-base-0));
+	--color-base-100:     oklch(24.28% 0.015 285.22);
+	--color-dark:         var(--color-base-100);
+	--color-light:        var(--color-base-0);
+	--token-prob-box:     #4a4a4a;
+
+	font-family:           monospace;
+	font-size:             15px;
+
+	accent-color:          var(--color-base-30);
+	background:            var(--color-bg-dark);
+	color:                 var(--color-base-0);
+	color-scheme:          dark;


The code is a bit misaligned in some places:

Also, I'm not totally sold on these stylistic changes, but they're not too bad either, so I guess they're okay to keep if you really want them.

lmg-anon · 2024-02-09T05:54:53Z

mikupad.html

-html.monospace-dark .modal {
-	background: #282833;
-}


looks like the merge with the upstream wasn't done properly.

lmg-anon · 2024-02-09T05:56:15Z

mikupad.html

@@ -1145,6 +1223,7 @@
 		options.dynamic_temperature = true;
 		options.dynatemp_low = Math.max(0, options.temperature - options.dynatemp_range);
 		options.dynatemp_high = Math.max(0, options.temperature + options.dynatemp_range);
+		delete options.dynatemp_range;


Another merge issue

lmg-anon · 2024-02-09T05:56:32Z

mikupad.html

@@ -1778,7 +1875,7 @@
 	maxPredictTokens: -1,
 	temperature: 0.7,
 	dynaTempRange: 0,
-	dynaTempExp: 1,
+	dynaTempExp: 0,


Another merge issue

lmg-anon · 2024-02-09T05:56:59Z

mikupad.html

+					${endpointAPI != 0 && html`
+						<div className="hbox">
+							<${InputBox} label="DynaTemp Range" type="number" step="0.01"
+								readOnly=${!!cancel} value=${dynaTempRange} onValueChange=${setDynaTempRange}/>
+							${endpointAPI != 2 && html`
+								<${InputBox} label="DynaTemp Exp" type="number" step="0.01"
+									readOnly=${!!cancel} value=${dynaTempExp} onValueChange=${setDynaTempExp}/>`}
+						</div>`}


Another merge issue

lmg-anon · 2024-02-09T06:03:36Z

mikupad.html

+function onLoad() {
+	// Any other general task we want to do when the page is loaded.
+	setTimeout(() => {
+		try {
+			document.getElementById("prompt-container").style.maxWidth = "36em";
+			// You can't actually get the width from the element unless you do some
+			// stupid workaround like "get the computed width in pixels, get the
+			// font size, do math on pixels, and convert to em". Instead, we'll just
+			// manually set it to be "36em" so it can be interacted with by the modal.
+
+			// document.getElementsByClassName("modal-width-readout")[0].value = "36";
+		} catch(e) {
+			reportError(e);
+		}
+	}, 1000);
+}


This feels wrong, you should do this with React's useEffect instead, and also you should load the value from the persistent state.

It is indeed a stupid hack. I can make a go at using React to do this more elegantly than just plain JS.

lmg-anon · 2024-02-09T06:16:47Z

mikupad.html

+				<div className="modal-width-adjustment">
+					<span>Box width: </span>
+					<button onClick=${() => adjustWidth(-5)}>⟪</button>
+					<button onClick=${() => adjustWidth(-1)}>⟨</button>
+					<input type="text" value="35" id="modal-width-readout" readOnly />
+					<button onClick=${() => adjustWidth( 1)}>〉</button>
+					<button onClick=${() => adjustWidth( 5)}>⟫</button>
+				</div>


Please allow the manual change of the input value and use a react state as I commented before.
Also, a button you can optionally hold down is better than simply having another button for larger increments.

lmg-anon · 2024-02-09T06:25:27Z

mikupad.html

+	function adjustWidth(adjustment) {
+
+		var width = document.getElementById("prompt-container").style.maxWidth.replace("em", "").trim();
+		width = String(parseInt(width) + parseInt(adjustment))
+		if (width < 1){
+			width = 1;
+		}
+		document.getElementById("prompt-container").style.maxWidth = width + "em";
+		document.getElementById("modal-width-readout").value = width
+	}


This code doesn't work when the sidebar is attached to the prompt container.
Besides, it's important to also update the CSS rules within the media queries, such as: @media (min-width: calc(40.5em + 250px)). Here, 40.5em essentially equates to 36em multiplied by the fontSize, which is 1.125rem.

lmg-anon · 2024-02-09T06:32:04Z

There are some issues with the theme:

The session list is too bright.
The box width input doesn't use the correct color scheme.

jp-x-g · 2024-02-11T23:29:51Z

Okay, I see -- I'll submit an updated patch that fixes this stuff (and hopefully that also resolves the random merge issues).

jp-x-g added 6 commits February 3, 2024 00:11

add test new color scheme

5fe274d

test adding a new color scheme

!

7b186c3

!

add selenized dummy theme to themes list

8bc2b92

test test test

Update mikupad.html -- selenized scheme now works, harmonize whitespa…

70d7943

…ce in color schemes

Merge branch 'lmg-anon:main' into main

80e5feb

Add preferences option for width of text box

726c281

Add an option to the popup preferences window that allows adjusting the width of the main prompt/completion container; buttons allow increase/decrease by 1em or 5em at a time.

jp-x-g changed the title ~~Add a "Selenized" color scheme~~ Add a "Selenized" color scheme and width adjustment option in prefs Feb 9, 2024

lmg-anon requested changes Feb 9, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a "Selenized" color scheme and width adjustment option in prefs #30

Add a "Selenized" color scheme and width adjustment option in prefs #30

jp-x-g commented Feb 8, 2024 •

edited

Loading

jp-x-g commented Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

jp-x-g Feb 11, 2024

lmg-anon Feb 9, 2024

lmg-anon Feb 9, 2024

lmg-anon commented Feb 9, 2024

jp-x-g commented Feb 11, 2024

Add a "Selenized" color scheme and width adjustment option in prefs #30

Are you sure you want to change the base?

Add a "Selenized" color scheme and width adjustment option in prefs #30

Conversation

jp-x-g commented Feb 8, 2024 • edited Loading

jp-x-g commented Feb 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmg-anon commented Feb 9, 2024

jp-x-g commented Feb 11, 2024

jp-x-g commented Feb 8, 2024 •

edited

Loading