first

.gitattributes

@@ -0,0 +1,31 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,16 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+venv/
+__pycache__/
+flagged/

Makefile

@@ -0,0 +1,9 @@
+build-client:
+	cd frontend && npm install && npm run build && rm -rf ../static && cp -r build/ ../static/
+build-dev:
+	cd frontend && npm install && npm run build && rm -rf ../static && cp -r build/ ../static/
+run-dev:
+	FLASK_ENV=development python app.py
+run-prod:
+	python app.py
+build-all: run-prod

README.md

@@ -0,0 +1,12 @@
+---
+title: Sd Color Palette Generator
+emoji: 📖🎨⚙️
+colorFrom: yellow
+colorTo: gray
+sdk: gradio
+sdk_version: 3.3
+app_file: run.py
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,26 @@
+import os
+from datasets import load_dataset
+from pathlib import Path
+import json
+from datasets import load_dataset
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+from PIL import Image
+from huggingface_hub import Repository
+
+app = Flask(__name__, static_url_path='/static')
+
+CORS(app)
+
+
+@ app.route('/')
+def index():
+    return app.send_static_file('index.html')
+
+
+if __name__ == '__main__':
+    mode = os.environ.get('FLASK_ENV', 'production')
+    print(mode)
+    dev = mode == 'development'
+    app.run(host='0.0.0.0',  port=int(
+        os.environ.get('PORT', 7860)), debug=True, use_reloader=dev)

data.json

@@ -0,0 +1 @@
+{"a painting of a Ferrari by Claude Monet": [{"colors": ["#885f45", "#181b26", "#a5966f", "#505f68"], "prompt": "a painting of a Ferrari by Claude Monet"}, {"colors": ["#ca9566", "#14161f", "#845340", "#4c556b"], "prompt": "a painting of a Ferrari by Claude Monet"}, {"colors": ["#896554", "#435d70", "#233c33", "#556a5e"], "prompt": "a painting of a Ferrari by Claude Monet"}], "a photo of a beautiful sunset in San Francisco": [{"colors": ["#ac5913", "#ed8703", "#290f03", "#f68f0e"], "prompt": "a photo of a beautiful sunset in San Francisco"}, {"colors": ["#78464d", "#2a0d08", "#3a1d24", "#e0a365"], "prompt": "a photo of a beautiful sunset in San Francisco"}, {"colors": ["#848ab9", "#6074b9", "#e39459", "#734c5c"], "prompt": "a photo of a beautiful sunset in San Francisco"}], "a photo of a elmo drinking at starbucks": [{"colors": ["#530205", "#231812", "#a4050e", "#895531"], "prompt": "a photo of a elmo drinking at starbucks"}, {"colors": ["#45010c", "#ab0211", "#c6ab77", "#0b0b13"], "prompt": "a photo of a elmo drinking at starbucks"}, {"colors": ["#31180e", "#ce010c", "#855139", "#240e11"], "prompt": "a photo of a elmo drinking at starbucks"}], "a photo of a polar bear in the Arctic": [{"colors": ["#a0d2f8", "#7ca9df", "#92c1f4", "#577db6"], "prompt": "a photo of a polar bear in the Arctic"}, {"colors": ["#8a9bb5", "#66758d", "#707c95", "#b8cde4"], "prompt": "a photo of a polar bear in the Arctic"}, {"colors": ["#7ca0da", "#527dc9", "#082e84", "#546d84"], "prompt": "a photo of a polar bear in the Arctic"}], "a paint of a polar bear in the Arctic painted by Vincent van Gogh": [{"colors": ["#eae8a7", "#dada95", "#deefe9", "#2e54b6"], "prompt": "a paint of a polar bear in the Arctic painted by Vincent van Gogh"}, {"colors": ["#91a7b4", "#163488", "#335998", "#c9d2cb"], "prompt": "a paint of a polar bear in the Arctic painted by Vincent van Gogh"}, {"colors": ["#61afdf", "#f2f1ca", "#a9e3f1", "#89d4ec"], "prompt": "a paint of a polar bear in the Arctic painted by Vincent van Gogh"}], "a photo of a polar bear in the zoo": [{"colors": ["#4b6743", "#201f15", "#20321d", "#5c6b39"], "prompt": "a photo of a polar bear in the zoo"}, {"colors": ["#1f331e", "#282c14", "#686356", "#e5eff4"], "prompt": "a photo of a polar bear in the zoo"}, {"colors": ["#6f5f3a", "#dfe6ef", "#362811", "#ecefee"], "prompt": "a photo of a polar bear in the zoo"}]}

extract.py

@@ -0,0 +1,31 @@
+from colorthief import ColorThief
+from pathlib import Path
+import json
+from PIL import Image
+
+
+images_path = Path('frontend/static/images')
+images = images_path.glob("*.[jpeg jpg png]*")
+print(images)
+data = {}
+for image in images:
+    print(image.stem)
+    image_pil = Image.open(image)
+    color_thief = ColorThief(image)
+    image_pil.save(Path.joinpath(images_path, (image.stem + ".jpg")), optimize=True, quality=95)
+    prompt = image.stem.split("-")[2]
+    try:
+        type(data[prompt]) == list
+    except:
+        data[prompt] = []
+
+    colors = color_thief.get_palette(color_count=5, quality=1)
+    colors_hex = ['#%02x%02x%02x' % (color) for color in colors]
+    data[prompt].append({
+        "colors": colors_hex,
+        "imgURL": "static/images/" + image.stem + ".jpg"
+    })
+prompts = [{"prompt": prompt, "images": values}
+           for (prompt, values) in data.items()]
+with open('frontend/static/data.json', 'w') as f:
+    json.dump(prompts, f)

frontend/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

frontend/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+venv/
+__pycache__/

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

frontend/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

frontend/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "frontend",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "NODE_ENV=development vite --config vite.config.dev.ts dev",
+		"build": "NODE_ENV=production vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^1.0.0-next.43",
+		"@sveltejs/kit": "next",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"@types/cookie": "^0.5.1",
+		"@types/d3-color": "^3.1.0",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.11",
+		"d3-color": "^3.1.0",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.16",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.46.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.8",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"extract-colors": "^1.1.22",
+		"quantize": "^1.0.2",
+		"uninstall": "^0.0.0"
+	}
+}

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/app.d.ts

@@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface PageData {}
+	// interface PageError {}
+	// interface Platform {}
+}

frontend/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
+		%sveltekit.head%
+	</head>
+	<body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black">
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

frontend/src/lib/ColorPalette.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Color } from 'd3-color';
+
+	export let colors: Color[];
+	const n = colors.length;
+</script>
+
+<div class="flex flex-col items-center">
+	<div class="flex bg-black">
+		{#each colors as color}
+			<div class="aspect-square">
+				<svg class="max-w-full" width="100" viewBox="0 0 50 50">
+					<rect x="0" y="0" width="50" height="50" fill={color.hex()} />
+				</svg>
+			</div>
+		{/each}
+	</div>
+</div>

frontend/src/lib/Palette.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as d3 from 'd3-color';
+	import type { ColorsPrompt } from '$lib/types';
+	import ColorPalette from '$lib/ColorPalette.svelte';
+
+	export let promptData: ColorsPrompt;
+	console.log(promptData);
+	let seletecdImage = 0;
+	$: prompt = promptData.prompt;
+	$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
+	$: imageSrc = promptData.images[seletecdImage].imgURL;
+</script>
+
+<div class="grid grid-cols-5">
+	<blockquote
+		class="col-span-3 italic font-semibold max-w-prose text-base text-center line-clamp-3 my-3"
+		title={prompt}
+	>
+		<p>{prompt}</p>
+	</blockquote>
+
+	<div class="row-start-2 col-span-3 flex items-center justify-center">
+		<ColorPalette {colors} />
+	</div>
+	<div class="row-start-2 col-start-4 ml-auto">
+		<div class="relative">
+			<img class="relative max-w-[100px]" src={imageSrc} alt={prompt} />
+			<div class="absolute flex justify-around w-full">
+				{#each promptData.images as image, i}
+					<button
+						class="{seletecdImage === i
+							? 'bg-black dark:bg-white'
+							: 'bg-white dark:bg-black'}   dark:bg-slate-300 rounded-full h-3 w-3 m-1 border border-black dark:border-white"
+						on:click={() => (seletecdImage = i)}
+						on:mousemove={() => (seletecdImage = i)}
+					/>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	<div class="row-start-2 col-start-5 flex items-center justify-center">
+		<button
+			class="bg-black text-white  border-2 dark:border-white border-black rounded-2xl ml-2 p-3 shadow-sm font-bold focus:outline-none focus:border-gray-400"
+		>
+			Remix
+		</button>
+	</div>
+</div>

frontend/src/lib/store.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+export const loadingState = writable<string>('');
+export const isLoading = writable<boolean>(false);

frontend/src/lib/types.ts

@@ -0,0 +1,15 @@
+import type { Color } from 'd3-color';
+
+export interface ColorsImage {
+	colors: Color[];
+	imgURL: string;
+}
+export interface ColorsPrompt {
+	prompt: string;
+	images: ColorsImage[];
+}
+
+export interface LoadingState {
+	loadingMessage: string;
+	isLoading: boolean;
+}

frontend/src/lib/utils.ts

@@ -0,0 +1,112 @@
+import quantize from 'quantize';
+import * as d3 from 'd3-color';
+import type { Color } from 'd3-color';
+import { dev } from '$app/environment';
+
+export function randomSeed() {
+	return BigInt(13248873089935215612 & (((1 << 63) - 1) * Math.random()));
+}
+
+function sortColors(colors: Color[]): Color[] {
+	const reverse = true;
+	return colors
+		.map((color) => d3.hcl(color))
+		.sort((a, b) => {
+			console.log(a);
+			const aa = a.h;
+			const bb = b.h;
+
+			return !reverse ? aa - bb || isNaN(aa) - isNaN(bb) : bb - aa || isNaN(bb) - isNaN(aa);
+		});
+}
+
+function createPixelArray(imgData: Uint8ClampedArray, pixelCount: number, quality: number) {
+	// from https://github.com/lokesh/color-thief
+	const pixels = imgData;
+	const pixelArray = [];
+
+	for (let i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
+		offset = i * 4;
+		r = pixels[offset + 0];
+		g = pixels[offset + 1];
+		b = pixels[offset + 2];
+		a = pixels[offset + 3];
+
+		// If pixel is mostly opaque and not white
+		if (typeof a === 'undefined' || a >= 125) {
+			if (!(r > 250 && g > 250 && b > 250)) {
+				pixelArray.push([r, g, b]);
+			}
+		}
+	}
+	return pixelArray;
+}
+
+export function extractPalette(
+	base64image: string,
+	colorCount = 5,
+	quality = 1
+): Promise<{ colors: Color[]; imgBlob: Blob }> {
+	return new Promise((resolve) => {
+		const img = new Image();
+		img.onload = async () => {
+			const w = img.width;
+			const h = img.height;
+			const canvas: HTMLCanvasElement = document.createElement('canvas');
+			canvas.width = w;
+			canvas.height = h;
+			const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+			ctx.drawImage(img, 0, 0, w, h);
+			const imageData = ctx.getImageData(0, 0, w, h);
+			const pixelArray = createPixelArray(imageData.data, w * h, quality);
+			const cmap = quantize(pixelArray, colorCount);
+			const colors: number[][] = cmap.palette();
+
+			const imgBlob: Blob = await new Promise((r) => canvas.toBlob(r, 'image/jpeg', 0.95));
+			const colorsRGB = colors.map((color) => d3.rgb(...(color as [number, number, number])));
+			resolve({
+				colors: sortColors(colorsRGB),
+				imgBlob
+			});
+		};
+		img.src = base64image;
+	});
+}
+
+export async function uploadImage(imagBlob: Blob, prompt: string): string {
+	// simple regex slugify string	for file name
+	const promptSlug = slugify(prompt);
+	const UPLOAD_URL = dev ? 'moon/uploads' : 'https://huggingface.co/uploads';
+
+	const hash = crypto.randomUUID().split('-')[0];
+	const fileName = `color-palette-${hash}-${promptSlug}.jpeg`;
+
+	const file = new File([imagBlob], fileName, { type: 'image/jpeg' });
+
+	console.log('uploading image', file);
+
+	const response = await fetch(UPLOAD_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': file.type,
+			'X-Requested-With': 'XMLHttpRequest'
+		},
+		body: file /// <- File inherits from Blob
+	});
+	const url = await response.text();
+
+	console.log('uploaded images', url);
+	return url;
+}
+
+function slugify(text: string) {
+	if (!text) return '';
+	return text
+		.toString()
+		.toLowerCase()
+		.replace(/\s+/g, '-')
+		.replace(/[^\w\-]+/g, '')
+		.replace(/\-\-+/g, '-')
+		.replace(/^-+/, '')
+		.replace(/-+$/, '');
+}

frontend/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

frontend/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

frontend/src/routes/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import type { ColorsPrompt, ColorsImage } from '$lib/types';
+	import { dev } from '$app/environment';
+	import { randomSeed, extractPalette, uploadImage } from '$lib/utils';
+	import { isLoading, loadingState } from '$lib/store';
+	import { PUBLIC_WS_ENDPOINT } from '$env/static/public';
+
+	import Pallette from '$lib/Palette.svelte';
+	const apiUrl = dev
+		? 'http://localhost:7860/static/'
+		: '/embed/huggingface-projects/color-palette-generator-sd/static/';
+
+	let promptsData: ColorsPrompt[];
+	let prompt: string;
+
+	onMount(async () => {
+		fetch(apiUrl + 'data.json')
+			.then((d) => d.json())
+			.then((data) => (promptsData = data));
+	});
+
+	let cc = 0;
+
+	export async function generatePalette(_prompt: string) {
+		if (!_prompt || $isLoading == true) return;
+		$loadingState = 'Pending';
+		$isLoading = true;
+		const hash = crypto.randomUUID();
+		const payload = {
+			fn_index: 2,
+			data: [
+				// prompt, samples, steps, scale, seed
+				_prompt,
+				3,
+				40,
+				7.5,
+				Number(randomSeed())
+			]
+		};
+		const websocket = new WebSocket(PUBLIC_WS_ENDPOINT);
+		websocket.onopen = async function (event) {
+			console.log(event);
+			websocket.send(JSON.stringify({ hash: hash }));
+		};
+		websocket.onclose = (evt) => {
+			if (!evt.wasClean) {
+				$loadingState = 'Error';
+				$isLoading = false;
+			}
+		};
+		websocket.onmessage = async function (event) {
+			try {
+				const data = JSON.parse(event.data);
+				console.log(data);
+				$loadingState = '';
+				switch (data.msg) {
+					case 'send_data':
+						$loadingState = 'Sending Data';
+						websocket.send(JSON.stringify(payload));
+						break;
+					case 'queue_full':
+						$loadingState = 'Queue full';
+						websocket.close();
+						$isLoading = false;
+						return;
+					case 'estimation':
+						const { msg, rank, queue_size } = data;
+						$loadingState = `${msg} ${rank}/${queue_size}`;
+						break;
+					case 'process_generating':
+						$loadingState = data.success ? 'Generating' : 'Error';
+						break;
+					case 'process_completed':
+						$loadingState = data.success ? 'Complete' : 'Error';
+						console.log(data.output);
+						const images = await extractColorsImages(data.output.data[0], _prompt);
+						promptsData = [
+							{
+								prompt: _prompt,
+								images
+							}
+						].concat(promptsData);
+						websocket.close();
+						$isLoading = false;
+						return;
+					case 'process_starts':
+						$loadingState = 'Process Starts';
+						break;
+				}
+			} catch (e) {
+				console.log(e);
+				$isLoading = false;
+				$loadingState = 'Error';
+			}
+		};
+	}
+	async function extractColorsImages(images: string[], _prompt: string): Promise<ColorsImage[]> {
+		const colorImages = [];
+		for (const base64img of images) {
+			const { colors, imgBlob } = await extractPalette(base64img);
+			const url = await uploadImage(imgBlob, _prompt);
+			const colorsImage: ColorsImage = {
+				colors,
+				imgURL: url
+			};
+			colorImages.push(colorsImage);
+		}
+		return colorImages;
+	}
+</script>
+
+<div class="max-w-screen-lg mx-auto px-3 py-8 relative z-0">
+	<div class="relative">
+		<form class="grid grid-cols-5" on:submit|preventDefault={() => generatePalette(prompt)}>
+			<input
+				class="disabled:opacity-50 col-span-4 flex-grow italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-40 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl p-3 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1 "
+				placeholder="A photo of a beautiful sunset in San Francisco"
+				type="text"
+				name="prompt"
+				bind:value={prompt}
+				disabled={$isLoading}
+			/>
+			<button
+				class="disabled:opacity-50 flex-1 dark:bg-white dark:text-black border-2 border-black rounded-2xl ml-2 p-3 px-6 shadow-sm font-bold focus:outline-none focus:border-gray-400"
+				on:click|preventDefault={() => generatePalette(prompt)}
+				disabled={$isLoading}
+			>
+				Create Palette
+			</button>
+		</form>
+		{#if $loadingState}
+			<h3 class="text-xs font-bold ml-3">{$loadingState}</h3>
+		{/if}
+	</div>
+
+	{#if promptsData}
+		<div class="pt-5">
+			{#each promptsData as promptData}
+				<Pallette {promptData} />
+			{/each}
+		</div>
+	{/if}
+</div>

frontend/static/data.json

@@ -0,0 +1 @@
+[{"prompt": "a painting of a Ferrari by Claude Monet", "images": [{"colors": ["#2f3c6e", "#deacdf", "#e2e23b", "#b923bf", "#ed68f7"], "imgURL": "static/images/00045-2327336162-a painting of a Ferrari by Claude Monet.jpg"}, {"colors": ["#f9b9a0", "#b30814", "#36102d", "#e240ab", "#680c26"], "imgURL": "static/images/00044-2327336161-a painting of a Ferrari by Claude Monet.jpg"}, {"colors": ["#13bbab", "#f7e2ba", "#cb3b37", "#062726", "#055637"], "imgURL": "static/images/00046-2327336163-a painting of a Ferrari by Claude Monet.jpg"}]}, {"prompt": "a photo of a beautiful sunset in San Francisco", "images": [{"colors": ["#e2dcf8", "#d47a0d", "#50244c", "#b63547", "#f270f2"], "imgURL": "static/images/00003-3329858470-a photo of a beautiful sunset in San Francisco.jpg"}, {"colors": ["#177405", "#d6f12d", "#7c1a04", "#b9a5a4", "#6ae61b"], "imgURL": "static/images/00001-3329858468-a photo of a beautiful sunset in San Francisco.jpg"}, {"colors": ["#766dae", "#4e2806", "#e8b878", "#1c317e", "#46c21e"], "imgURL": "static/images/00000-3329858467-a photo of a beautiful sunset in San Francisco.jpg"}]}, {"prompt": "a photo of a elmo drinking at starbucks", "images": [{"colors": ["#179209", "#eee84b", "#571208", "#b91806", "#537c91"], "imgURL": "static/images/00036-2824881702-a photo of a elmo drinking at starbucks.jpg"}, {"colors": ["#d62fec", "#281185", "#f2bbde", "#db2f23", "#8505e1"], "imgURL": "static/images/00035-2824881701-a photo of a elmo drinking at starbucks.jpg"}, {"colors": ["#19550f", "#a80e05", "#f5ce1f", "#f7d9cf", "#859721"], "imgURL": "static/images/00037-2824881703-a photo of a elmo drinking at starbucks.jpg"}]}, {"prompt": "a photo of a polar bear in the Arctic", "images": [{"colors": ["#4cdde5", "#e755ce", "#2d2a64", "#26c81d", "#d8edc5"], "imgURL": "static/images/00010-3082979826-a photo of a polar bear in the Arctic.jpg"}, {"colors": ["#66bdda", "#071ed8", "#04111b", "#1f3f78", "#7c839b"], "imgURL": "static/images/00009-3082979825-a photo of a polar bear in the Arctic.jpg"}, {"colors": ["#c4efd0", "#194286", "#6591b7", "#7e9f52", "#576a3d"], "imgURL": "static/images/00011-3082979827-a photo of a polar bear in the Arctic.jpg"}]}, {"prompt": "a paint of a polar bear in the Arctic painted by Vincent van Gogh", "images": [{"colors": ["#3de9f9", "#172eb8", "#dc44d6", "#1bd40d", "#e7d9e8"], "imgURL": "static/images/00049-3943684507-a paint of a polar bear in the Arctic painted by Vincent van Gogh.jpg"}, {"colors": ["#f984fb", "#35208b", "#a9040f", "#d209ef", "#eed5f9"], "imgURL": "static/images/00050-3943684508-a paint of a polar bear in the Arctic painted by Vincent van Gogh.jpg"}, {"colors": ["#143153", "#ebf521", "#7c3117", "#a8c9f2", "#66a70a"], "imgURL": "static/images/00048-3943684506-a paint of a polar bear in the Arctic painted by Vincent van Gogh.jpg"}]}, {"prompt": "a photo of a polar bear in the zoo", "images": [{"colors": ["#cd1ce0", "#f397ec", "#980d30", "#3e231a", "#713789"], "imgURL": "static/images/00026-1171300814-a photo of a polar bear in the zoo.jpg"}, {"colors": ["#1f15dc", "#f6c3fb", "#92edfa", "#1d2824", "#de30f2"], "imgURL": "static/images/00013-2991374000-a photo of a polar bear in the zoo.jpg"}, {"colors": ["#0512dc", "#ceebf5", "#0c2726", "#55acb6", "#8c61fc"], "imgURL": "static/images/00027-1171300815-a photo of a polar bear in the zoo.jpg"}]}]

frontend/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: