Ad hoc Linter UI (#13)

LintLanguageDocs.md

@@ -7,8 +7,8 @@ OR: {or: [EXPR, EXPR, EXPR]}
 NOT: {not: EXPR}
 
 Quantifiers:
-FORALL: {all: {varbs: Variable[], where?: EXPR, in: Variable | Value[]}}
-EXISTS: {exists: {varbs: Variable[], where?: EXPR, in: Variable | Value[]}}
+FORALL: {all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
+EXISTS: {exists: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
 
 Comparisons (value) => expression
 similar: {"similar": {left: Value, right: Value, threshold: Number}}
@@ -20,7 +20,7 @@ greater than: {">": {left: Value, right: Value}}
 Value = Variable | Number | Color | Boolean
 
 Operations:
-\*: {left: Number | Variable, right: Number | Variable}
+*: {left: Number | Variable, right: Number | Variable}
 +: {left: Number | Variable, right: Number | Variable}
 /: {left: Number | Variable, right: Number | Variable}
 -: {left: Number | Variable, right: Number | Variable}

README.md

@@ -10,10 +10,17 @@ Use: should point to localhost:8888 if all is well
 
 First time you start it up you should also run `yarn prep data`
 
+Macros story
+
+- not similar
+- sequences
+- "where": { "!=": {"left": "index(a)", "right": "index(b)"} },
+
 # Language todos
 
 - [ ] Integration into main app
 - [ ] Add background, roles, palette level semantics
+- [ ] Categorical mutually distinct
 - [x] "Blame" for colors
 - [ ] JSON Schema (for validation) (if parser is not used), get a sustainable way to use it
 - [x] Basic Language
@@ -24,6 +31,7 @@ First time you start it up you should also run `yarn prep data`
 # Todo bankruptcy
 
 - [ ] Gamut algorithm broken again
+- [ ] Add HCT/CAM, add explainers to each of the color spaces
 - [ ] Allow no palettes, allows renaming of non-current palettes
 - [ ] MS didn't like the location of the new button
 - [ ] Colors from String should save on enter

netlify/functions/suggest-lint-metadata.ts

@@ -0,0 +1,23 @@
+import { genericHandler } from "../utils";
+
+type promptInput = {
+  lintProgram: string;
+};
+const prompt = (pal: promptInput) => `
+# Identity and Task
+You are a color expert and domain-specific language programmer. You take in a program written in a JSON DSL that checks for color palettes for errors and suggests some meta data for it. Your task is to suggest a name, description, and fail message for the given program. Description and fail message should be specific clear and thoughtful. The name should be short and descriptive. 
+
+# Output format
+Your response should be a JSON object with the following structure: {"description: string, "failMessage": string, "name": string}. This must be a valid JSON object.
+
+Prompt: ${JSON.stringify(pal.lintProgram)}
+
+Your response: `;
+export const handler = genericHandler<promptInput>(prompt, (x) => {
+  const input = JSON.parse(x);
+  const lintProgram = input.lintProgram;
+  if (typeof lintProgram !== "string") {
+    throw new Error("No lintProgram");
+  }
+  return { lintProgram };
+});

netlify/functions/suggest-lint.ts

@@ -0,0 +1,77 @@
+import { genericHandler } from "../utils";
+
+type promptInput = {
+  lintPrompt: string;
+};
+const prompt = (pal: promptInput) => `
+# Identity
+You are a color expert and domain-specific language programmer. You take in a lint prompt and suggest a lint using the following programming language.  
+
+# Task and output format
+Given a lint prompt, suggest a lint using the color check linting language Your response should be a JSON object written in the following JSON DSL. You must be explicit in your response and include all necessary information. If a list of colors is suggest you should guess what those colors are and give explicit values
+
+Expressions
+EXPR = Conjunction | Quantifier | Comparison | Boolean
+
+Conjunctions:
+AND: {and: [EXPR, EXPR, ...]}
+OR: {or: [EXPR, EXPR, EXPR]}
+NOT: {not: EXPR}
+
+Quantifiers:
+FORALL: {all: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
+EXISTS: {exist: {varbs: Variable[], predicate: EXPR, where?: EXPR, in: Variable | Value[]}}
+
+Comparisons (value) => expression
+similar: {"similar": {left: Value, right: Value, threshold: Number}}
+equal: {"==": {left: Value, right: Value}}
+not equal: {"!=": {left: Value, right: Value}}
+less than: {"<": {left: Value, right: Value}}
+greater than: {">": {left: Value, right: Value}}
+
+Value = Variable | Number | Color | Boolean
+Variable = string | colors | background
+
+Operations:
+*|+|/|-: {left: Number | Variable, right: Number | Variable}
+dist: {left: Color | Variable, right: Color | Variable, space: COLOR_SPACE }
+deltaE: {left: Color | Variable, right: Color | Variable, algorithm: '2000' | etc }
+contrast: {left: Color | Variable, right: Color | Variable, algorithm: | "APCA" | "WCAG21" | "Michelson" | "Weber" | "Lstar" | "DeltaPhi"}
+count: {count: Variable | Number[] | Color[]}
+sum|min|max|mean|first|last|extent: {sum: Variable | Number[]}
+toColor: {toColor: variableName, space: 'lab' | 'hsl' | etc, channel: 'a' | 'b' | 'l' | etc}
+cvd_sim: {cvd_sim: variableName, type: 'protanomaly' | 'deuteranomaly' | 'tritanopia' | 'grayscale'}
+name: {name: variableName}
+map|sort: {map: Variable | Value[], func: Operation}
+filter: {filter: Variable | Value[], func: EXPR}
+
+Example prompt: All colors should be color blind friendly for deuteranopia
+Example Result: 
+{"not": {"exist": {
+        "in": "colors",
+        "varbs": ["a", "b"],
+        "predicate": {
+          "!=": {"left": { "cvd_sim": "a", "type": "deuteranopia" }, "right": { "cvd_sim": "b", "type": "deuteranopia" }
+          }}}}}
+
+          Example prompt: Colors should not be extreme
+Example Result:
+{"all": {
+  "in": "colors",
+  "varb": "a",
+  "predicate": {
+    "all": {"in": ["#000000", "#ffffff"], "varb": "b",
+      "predicate": { "!=": { "left": "a", "right": "b" } },
+    }}}}
+
+Prompt: ${JSON.stringify(pal.lintPrompt)}
+
+Your response: `;
+export const handler = genericHandler<promptInput>(prompt, (x) => {
+  const input = JSON.parse(x);
+  const lintPrompt = input.lintPrompt;
+  if (typeof lintPrompt !== "string") {
+    throw new Error("No lintPrompt");
+  }
+  return { lintPrompt };
+});

netlify/utils.ts

@@ -22,10 +22,10 @@ const engines = {
   openai: (prompt: string) =>
     openai.chat.completions.create({
       messages: [{ role: "user", content: prompt }],
-      model: "gpt-3.5-turbo",
-      n: 3,
+      // model: "gpt-3.5-turbo",
+      n: 1,
       temperature: 0.5,
-      // model: "gpt-4",
+      model: "gpt-4",
     }),
 };
 

package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/chroma-js": "^2.4.3",
     "@types/color-namer": "^1.3.3",
     "@types/d3": "^7.4.3",
     "@vitest/coverage-v8": "^1.2.2",
@@ -33,18 +34,18 @@
     "vitest": "^1.1.3"
   },
   "dependencies": {
-    "@codemirror/lang-xml": "^6.0.2",
     "@google/generative-ai": "^0.1.1",
-    "codemirror": "^6.0.1",
+    "chroma-js": "^2.4.2",
     "color-blind": "^0.1.3",
     "color-namer": "^1.4.0",
     "colorjs.io": "^0.4.5",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "fracturedjsonjs": "^3.1.0",
     "idb-keyval": "^6.2.1",
     "jsonc-parser": "^3.2.1",
+    "monaco-editor": "^0.45.0",
     "openai": "^4.21.0",
-    "svelte-codemirror-editor": "^1.2.0",
     "svelte-dnd-action": "^0.9.31",
     "svelte-portal": "^2.2.0",
     "tailwindcss": "^3.3.5",
@@ -53,4 +54,4 @@
     "vega-embed": "^6.23.0",
     "vega-lite": "^5.16.3"
   }
-}
+}