Styling changes for Gradio Workbook

editor/vscode/ai-workbook-ext/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                "selector": "import",
+                "format": [ "camelCase", "PascalCase" ]
+            }
+        ],
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

editor/vscode/ai-workbook-ext/.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

editor/vscode/ai-workbook-ext/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+        "ms-vscode.extension-test-runner"
+	]
+}

editor/vscode/ai-workbook-ext/.vscode/launch.json

@@ -0,0 +1,17 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

editor/vscode/ai-workbook-ext/.vscode/settings.json

@@ -0,0 +1,12 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off",
+    "editor.formatOnSave": true
+}

editor/vscode/ai-workbook-ext/.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

editor/vscode/ai-workbook-ext/.vscodeignore

@@ -0,0 +1,11 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*

editor/vscode/ai-workbook-ext/.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

editor/vscode/ai-workbook-ext/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "ai-workbook-ext" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

editor/vscode/ai-workbook-ext/README.md

@@ -0,0 +1,71 @@
+# ai-workbook-ext README
+
+This is the README for your extension "ai-workbook-ext". After writing up a brief description, we recommend including the following sections.
+
+## Features
+
+Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+
+For example if there is an image subfolder under your extension project workspace:
+
+\!\[feature X\]\(images/feature-x.png\)
+
+> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+
+## Requirements
+
+If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+
+## Extension Settings
+
+Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+
+For example:
+
+This extension contributes the following settings:
+
+* `myExtension.enable`: Enable/disable this extension.
+* `myExtension.thing`: Set to `blah` to do something.
+
+## Known Issues
+
+Calling out known issues can help limit users opening duplicate issues against your extension.
+
+## Release Notes
+
+Users appreciate release notes as you update your extension.
+
+### 1.0.0
+
+Initial release of ...
+
+### 1.0.1
+
+Fixed issue #.
+
+### 1.1.0
+
+Added features X, Y, and Z.
+
+---
+
+## Following extension guidelines
+
+Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
+
+* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
+
+## Working with Markdown
+
+You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+
+* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
+* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
+* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+
+## For more information
+
+* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
+* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+
+**Enjoy!**

editor/vscode/ai-workbook-ext/media/catScratch.css

@@ -0,0 +1,72 @@
+body {
+	justify-content: center;
+	align-items: center;
+	margin: 1em 2em;
+	background-image: url(./sand.jpg);
+	background-repeat: repeat;
+}
+
+body.vscode-dark {
+	background-image: url(./sand-dark.jpg);
+}
+
+.notes {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 100px);
+	grid-template-rows: repeat(auto-fill, 100px);
+	grid-gap: 2em;
+	justify-content: center;
+}
+
+.note {
+	display: flex;
+	flex-direction: column;
+	border-radius: 5px;
+	background-color: var(--vscode-editor-background);
+	text-align: center;
+	padding: 0.6em;
+	position: relative;
+	overflow: hidden;
+}
+
+.note .text {
+	flex: 1;
+	font-size: 3em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.note .created {
+	font-style: italic;
+	font-size: 0.75em;
+}
+
+.add-button {
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.open-raw-button {
+	height: 100px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.delete-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+.delete-button:before {
+	content: 'delete';
+}
+
+.note:hover .delete-button {
+	display: block;
+}

editor/vscode/ai-workbook-ext/media/catScratch.js

@@ -0,0 +1,108 @@
+// @ts-check
+
+// Script run within the webview itself.
+(function () {
+
+	// Get a reference to the VS Code webview api.
+	// We use this API to post messages back to our extension.
+
+	// @ts-ignore
+	const vscode = acquireVsCodeApi();
+
+
+	const notesContainer = /** @type {HTMLElement} */ (document.querySelector('.notes'));
+
+	const addButtonContainer = document.querySelector('.add-button');
+	addButtonContainer.querySelector('button').addEventListener('click', () => {
+		vscode.postMessage({
+			type: 'add'
+		});
+	})
+
+	const openRawButtonContainer = document.querySelector('.open-raw-button');
+	openRawButtonContainer.querySelector('button').addEventListener('click', () => {
+		vscode.postMessage({
+			type: 'open-raw'
+		});
+	})
+
+	const errorContainer = document.createElement('div');
+	document.body.appendChild(errorContainer);
+	errorContainer.className = 'error'
+	errorContainer.style.display = 'none'
+
+	/**
+	 * Render the document in the webview.
+	 */
+	function updateContent(/** @type {string} */ text) {
+		let json;
+		try {
+			if (!text) {
+				text = '{}';
+			}
+			json = JSON.parse(text);
+		} catch {
+			notesContainer.style.display = 'none';
+			errorContainer.innerText = 'Error: Document is not valid json';
+			errorContainer.style.display = '';
+			return;
+		}
+		notesContainer.style.display = '';
+		errorContainer.style.display = 'none';
+
+		// Render the scratches
+		notesContainer.innerHTML = '';
+		for (const note of json.scratches || []) {
+			const element = document.createElement('div');
+			element.className = 'note';
+			notesContainer.appendChild(element);
+
+			const text = document.createElement('div');
+			text.className = 'text';
+			const textContent = document.createElement('span');
+			textContent.innerText = note.text;
+			text.appendChild(textContent);
+			element.appendChild(text);
+
+			const created = document.createElement('div');
+			created.className = 'created';
+			created.innerText = new Date(note.created).toUTCString();
+			element.appendChild(created);
+
+			const deleteButton = document.createElement('button');
+			deleteButton.className = 'delete-button';
+			deleteButton.addEventListener('click', () => {
+				vscode.postMessage({ type: 'delete', id: note.id, });
+			});
+			element.appendChild(deleteButton);
+		}
+
+		notesContainer.appendChild(addButtonContainer);
+		notesContainer.appendChild(openRawButtonContainer);
+	}
+
+	// Handle messages sent from the extension to the webview
+	window.addEventListener('message', event => {
+		const message = event.data; // The json data that the extension sent
+		switch (message.type) {
+			case 'update':
+				const text = message.text;
+
+				// Update our webview's content
+				updateContent(text);
+
+				// Then persist state information.
+				// This state is returned in the call to `vscode.getState` below when a webview is reloaded.
+				vscode.setState({ text });
+
+				return;
+		}
+	});
+
+	// Webviews are normally torn down when not visible and re-created when they become visible again.
+	// State lets us save information across these re-loads
+	const state = vscode.getState();
+	if (state) {
+		updateContent(state.text);
+	}
+}());