feat: image config type and data skeleton handling

Author: BigJk

frontend/src/js/core/schema.ts

@@ -205,6 +205,14 @@ export function buildSchema(data: any): SchemaRoot {
 			case 'bigint':
 				break;
 			case 'string':
+				if (val.startsWith('!IMAGE')) {
+					return {
+						type: 'string',
+						inputType: 'Image',
+						key: path[path.length - 1],
+						default: val,
+					};
+				}
 				return {
 					type: 'string',
 					inputType: 'Text',

frontend/src/js/core/templating.ts

@@ -180,6 +180,8 @@ export type GlobalState = {
 	aiToken?: string;
 };
 
+const dataURIsCommitted: Record<string, boolean> = {};
+
 /**
  * Render template with given state.
  * @param template Template string.
@@ -212,9 +214,51 @@ export const render = (
 			clonedState.aiToken = ai.value.token;
 		}
 
+		const cleanupImages = (obj: any, parent: any, key: string) => {
+			if (obj === null || obj === undefined) {
+				return;
+			}
+
+			switch (typeof obj) {
+				case 'string':
+					if (obj.startsWith('!IMAGE:')) {
+						const stripped = obj.replace('!IMAGE:', '');
+						if (stripped.startsWith('http') || stripped.startsWith('data:')) {
+							parent[key] = stripped;
+						} else {
+							parent[key] = 'https://dummyimage.com/' + stripped;
+						}
+					} else if (obj.startsWith('!IMAGE')) {
+						parent[key] = 'https://dummyimage.com/400x3:2';
+					}
+
+					if (parent[key].startsWith('data:')) {
+						const imageHash = new jsSHA('SHA-256', 'TEXT', { encoding: 'UTF8' }).update(parent[key]).getHash('HEX');
+
+						if (!dataURIsCommitted[imageHash]) {
+							const request = new XMLHttpRequest();
+							request.open("POST", "/api/image-cache", false); // `false` makes the request synchronous
+							request.send(JSON.stringify(parent[key]));
+						}
+
+						parent[key] = `/api/image-cache/${imageHash}`;
+					}
+					return;
+				case 'object':
+					Object.keys(obj).forEach((key) => {
+						cleanupImages(obj[key], obj, key);
+					});
+					break;
+				default:
+					return;
+			}
+		};
+
+		cleanupImages((clonedState as any).it, null, '');
+		cleanupImages((clonedState as any).config, null, '');
+
 		Object.keys(clonedState.images).forEach((key) => {
 			const imageHash = new jsSHA('SHA-256', 'TEXT', { encoding: 'UTF8' }).update(clonedState.images[key]).getHash('HEX');
-			console.log(imageHash);
 			clonedState.images[key] = `/api/image-cache/${imageHash}`;
 		});
 

frontend/src/js/ui/components/config/creator.ts

@@ -84,7 +84,7 @@ export default (): m.Component<ConfigCreatorProps> => ({
 							]), //
 							m(DividerVert, { noSpacing: true }),
 							m(
-								'div.pa2.bg--black-05',
+								'div.pa2.bg--black-05.w-100',
 								m(types[c.type].view, {
 									value: c.default,
 									inEdit: true,

frontend/src/js/ui/components/config/image.ts

@@ -0,0 +1,57 @@
+import m from 'mithril';
+
+import { css } from 'goober';
+
+import Icon from 'js/ui/components/atomic/icon';
+import MiniHeader from 'js/ui/components/atomic/mini-header';
+import Config, { ConfigProps } from 'js/ui/components/config/config';
+import ImageUpload from 'js/ui/components/image-upload';
+import Flex from 'js/ui/components/layout/flex';
+
+const imageClass = css`
+	max-width: 80px;
+`;
+
+export default {
+    name: 'Image',
+    default: () => '!IMAGE',
+    view: (): m.Component<ConfigProps> => ({
+        view: ({ attrs }) => [
+            !attrs.inEdit ? null : m(MiniHeader, 'Default'),
+            attrs.value && attrs.value.length > 0 && attrs.value.startsWith('data:')
+                ? m(Flex, { items: 'center', justify: 'end' }, [
+                    m(`img.br2.mr2.w-100.${imageClass}`, { src: attrs.value }), //
+                    m(
+                        Icon,
+                        {
+                            icon: 'trash',
+                            size: 4,
+                            className: '.col-error',
+                            onClick: () => {
+                                if (!attrs.onChange) return;
+                                attrs.onChange("");
+                            },
+                        },
+                        'Remove',
+                    )
+                ])
+                : m(ImageUpload, {
+                    height: 50,
+                    compact: true,
+                    className: '.mb3',
+                    onUpload: (name, image) => {
+                        if (!attrs.onChange) return;
+
+                        m.request({
+                            url: `/api/image-cache`,
+                            method: 'POST',
+                            body: image,
+                        }).then(() => {
+                            if (!attrs.onChange) return;
+                            attrs.onChange(image);
+                        });
+                    },
+                }),
+        ],
+    }),
+} as Config;

frontend/src/js/ui/components/config/types.ts

@@ -2,6 +2,7 @@ import Checkbox from './checkbox';
 import DataSources from './data-source';
 import FilePath from './file-path';
 import FolderPath from './folder-path';
+import Image from './image';
 import MultipleOptions from './multiple-options';
 import Number from './number';
 import Options from './options';
@@ -18,4 +19,5 @@ export default {
 	DataSources,
 	FilePath,
 	FolderPath,
+	Image,
 };

frontend/src/js/ui/components/image-upload.ts

@@ -10,6 +10,7 @@ import Icon from 'js/ui/components/atomic/icon';
 import Flex from 'js/ui/components/layout/flex';
 
 type ImageUploadProps = {
+	compact?: boolean;
 	className?: string;
 	height?: number;
 	onUpload?: (name: string, base: string) => void;
@@ -30,8 +31,12 @@ export default (): m.Component<ImageUploadProps> => {
 						'label.pointer.db.h-100.w-100.ba.bw1.br2.b--dashed.b--col-primary-muted.bg-black-05',
 						{ style: { height: attrs.height ? attrs.height + 'px' : '250px' }, for: id },
 						[
-							m(Flex, { className: '.w-100.h-100', justify: 'center', items: 'center', direction: 'column' }, [
-								m(Icon, { icon: 'document', size: 2, className: '.mb3' }),
+							m(Flex, { className: '.w-100.h-100', justify: 'center', items: 'center', direction: attrs.compact ? 'row' : 'column' }, [
+								m(Icon, {
+									icon: 'document',
+									size: attrs.compact ? 4 : 2,
+									className: attrs.compact ? '.mr3' : '.mb3',
+								}),
 								m('div.fw5', 'Select image from your computer'),
 							]), //
 						],
@@ -59,17 +64,17 @@ export default (): m.Component<ImageUploadProps> => {
 					}),
 					//
 					// Divider
-					m(Icon, { icon: 'more', size: 3, className: '.mv3.o-50' }),
+					attrs.compact ? m('div.mb2') : m(Icon, { icon: 'more', size: 3, className: '.mv3.o-50' }),
 					//
 					// Upload from URL
-					m('div.db.h-100.w-100.ba.bw1.br2.b--dashed.b--col-primary-muted.bg-black-05.pa3', [
+					m('div.db.h-100.w-100.ba.bw1.br2.b--dashed.b--col-primary-muted.bg-black-05' + (attrs.compact ? '.pa2' : '.pa3'), [
 						m('div.tc.mb3.fw5', 'Download from URL'),
-						m(Flex, [
+						m(Flex, { direction: attrs.compact ? 'column' : 'row' }, [
 							m(Input, { className: '.w-100', placeholder: 'https://example.com/image.png', value: url }), //
 							m(
 								Button,
 								{
-									className: '.ml2',
+									className: attrs.compact ? '.mt2' : '.ml2',
 									intend: 'primary',
 									onClick: () => {
 										if (url.length === 0) return;