split things into components + lint

src/lib/agents/evalBuilder.ts

@@ -1,48 +1,48 @@
-import type { Tool } from './tools/tool';
+import type { Tool } from "./tools/tool";
 
 export type Update = {
-	message: string;
-	data: undefined | string | Blob;
+  message: string;
+  data: undefined | string | Blob;
 };
 
 // this function passes the tools & files to the context before calling eval
 export async function evalBuilder(
-	code: string,
-	tools: Tool<any, any>[],
-	files: FileList | null,
-	updateCallback: (message: string, data: undefined | string | Blob) => void
+  code: string,
+  tools: Tool<any, any>[],
+  files: FileList | null,
+  updateCallback: (message: string, data: undefined | string | Blob) => void
 ) {
-	async function wrapperEval() {
-		if (files) {
-			if (files[0].type.startsWith('image')) {
-				// @ts-ignore
-				globalThis['image'] = await files[0].arrayBuffer();
-			} else if (files[0].type.startsWith('audio')) {
-				// @ts-ignore
-				globalThis['audio'] = await files[0].arrayBuffer();
-			}
-		}
+  async function wrapperEval() {
+    if (files) {
+      if (files[0].type.startsWith("image")) {
+        // @ts-ignore
+        globalThis["image"] = await files[0].arrayBuffer();
+      } else if (files[0].type.startsWith("audio")) {
+        // @ts-ignore
+        globalThis["audio"] = await files[0].arrayBuffer();
+      }
+    }
 
-		// add tools to context
-		for (const tool of tools.filter((el) => el.name !== 'message')) {
-			// @ts-ignore
-			globalThis[tool.name] = tool.call;
-		}
+    // add tools to context
+    for (const tool of tools) {
+      // @ts-ignore
+      globalThis[tool.name] = tool.call;
+    }
 
-		// @ts-ignore
-		globalThis['message'] = updateCallback;
+    // @ts-ignore
+    globalThis["message"] = updateCallback;
 
-		await Object.getPrototypeOf(async function () {}).constructor(`
+    await Object.getPrototypeOf(async function () {}).constructor(`
 ${code}
 return await generate();
 `)();
 
-		// clean up tools
-		for (const tool of tools) {
-			// @ts-ignore
-			delete globalThis[tool.name];
-		}
-	}
+    // clean up tools
+    for (const tool of tools) {
+      // @ts-ignore
+      delete globalThis[tool.name];
+    }
+  }
 
-	return wrapperEval;
+  return wrapperEval;
 }

src/lib/agents/generateCode.ts

@@ -1,35 +1,38 @@
-import type { Tool } from './tools/tool';
+import type { Tool } from "./tools/tool";
 
-import { get } from 'svelte/store';
-import { OPENAI_API_KEY } from '../store';
-import { Configuration, OpenAIApi } from 'openai';
-import { generatePrompt } from './promptGeneration';
+import { get } from "svelte/store";
+import { OPENAI_API_KEY } from "../store";
+import { Configuration, OpenAIApi } from "openai";
+import { generatePrompt } from "./promptGeneration";
+import { messageTool } from "./tools/message";
 
 export async function generateCode(
-	prompt: string,
-	tools: Tool<any, any>[],
-	files: FileList | null
+  prompt: string,
+  tools: Tool<any, any>[],
+  files: FileList | null
 ) {
-	const fullprompt = generatePrompt(
-		prompt,
-		tools,
-		!!files && files[0].type.startsWith('image'),
-		!!files && files[0].type.startsWith('audio')
-	);
+  const fullprompt = generatePrompt(
+    prompt,
+    [...tools, messageTool],
+    !!files && files[0].type.startsWith("image"),
+    !!files && files[0].type.startsWith("audio")
+  );
 
-	const openai = new OpenAIApi(new Configuration({ apiKey: get(OPENAI_API_KEY) }));
-	const textAnswer =
-		(
-			await openai.createCompletion({
-				model: 'text-davinci-003',
-				prompt: fullprompt,
-				max_tokens: 1000
-			})
-		).data.choices[0].text ?? '';
+  const openai = new OpenAIApi(
+    new Configuration({ apiKey: get(OPENAI_API_KEY) })
+  );
+  const textAnswer =
+    (
+      await openai.createCompletion({
+        model: "text-davinci-003",
+        prompt: fullprompt,
+        max_tokens: 1000,
+      })
+    ).data.choices[0].text ?? "";
 
-	const regex = /```(.*?)```/gs;
-	const matches = [...textAnswer.matchAll(regex)];
+  const regex = /```(.*?)```/gs;
+  const matches = [...textAnswer.matchAll(regex)];
 
-	const codeBlocks = matches.map((match) => match[1]);
-	return codeBlocks[0].replace('js\n', '') ?? 'nothing';
+  const codeBlocks = matches.map((match) => match[1]);
+  return codeBlocks[0].replace("js\n", "") ?? "nothing";
 }

src/lib/agents/getInference.ts

@@ -1,7 +1,7 @@
-import { HfInference } from '@huggingface/inference';
-import { get } from 'svelte/store';
-import { HF_ACCESS_TOKEN } from '../store';
+import { HfInference } from "@huggingface/inference";
+import { get } from "svelte/store";
+import { HF_ACCESS_TOKEN } from "../store";
 
 export function getInference() {
-	return new HfInference(get(HF_ACCESS_TOKEN));
+  return new HfInference(get(HF_ACCESS_TOKEN));
 }

src/lib/agents/promptGeneration.ts

@@ -1,39 +1,39 @@
-import type { Tool } from './tools/tool';
+import type { Tool } from "./tools/tool";
 
 function toolDescription(tool: Tool<any, any>) {
-	let prompt = `	name: ${tool.name} \n	description: ${tool.description}`;
+  let prompt = `	name: ${tool.name} \n	description: ${tool.description}`;
 
-	const examples = tool.examples.slice(0, 1).map((example) => {
-		return `	prompt: ${example.prompt} \n	command generated: \`${example.command}\``;
-	});
+  const examples = tool.examples.slice(0, 1).map((example) => {
+    return `	prompt: ${example.prompt} \n	command generated: \`${example.command}\``;
+  });
 
-	prompt += `\n` + examples.join('\n');
+  prompt += `\n` + examples.join("\n");
 
-	return prompt;
+  return prompt;
 }
 
 export function generatePrompt(
-	prompt: string,
-	tools: Tool<any, any>[],
-	image?: boolean,
-	audio?: boolean
+  prompt: string,
+  tools: Tool<any, any>[],
+  image?: boolean,
+  audio?: boolean
 ) {
-	if (tools.length === 0) {
-		throw new Error('no tools selected');
-	}
-
-	let params = '';
-
-	if (image) {
-		params += `image`;
-	}
-	if (audio) {
-		params += params ? ',' : '';
-		params += `audio`;
-	}
-
-	// describe all the tools
-	const fullPrompt = `
+  if (tools.length === 0) {
+    throw new Error("no tools selected");
+  }
+
+  let params = "";
+
+  if (image) {
+    params += `image`;
+  }
+  if (audio) {
+    params += params ? "," : "";
+    params += `audio`;
+  }
+
+  // describe all the tools
+  const fullPrompt = `
 Create a function that does the following: ${prompt}. 
 
 Examples:
@@ -68,7 +68,7 @@ async function generate(audio) {
 \`\`\`
 
 In order to help in answering the above prompt, the function has access to the following methods to generate outputs.
-${tools.map((tool) => toolDescription(tool)).join('\n\n ')}
+${tools.map((tool) => toolDescription(tool)).join("\n\n ")}
 
 Use the above methods and only the above methods to answer the prompt: ${prompt}.
 
@@ -80,5 +80,5 @@ return output;
 };
 \`\`\``;
 
-	return fullPrompt;
+  return fullPrompt;
 }

src/lib/agents/tools/imageToText.ts

@@ -1,25 +1,31 @@
-import { getInference } from '$lib/agents/getInference';
-import type { ImageToTextArgs, ImageToTextOutput } from '@huggingface/inference';
-import type { Tool } from './tool';
+import { getInference } from "$lib/agents/getInference";
+import type {
+  ImageToTextArgs,
+  ImageToTextOutput,
+} from "@huggingface/inference";
+import type { Tool } from "./tool";
 
-export const imageToTextTool: Tool<ImageToTextArgs['data'], ImageToTextOutput['generated_text']> = {
-	name: 'imageToText',
-	description: 'Caption an image.',
-	examples: [
-		{
-			prompt: 'Describe the image',
-			command: 'imageToText(image)'
-		}
-	],
-	call: async (input) => {
-		return (
-			await getInference().imageToText(
-				{
-					data: await input,
-					model: 'nlpconnect/vit-gpt2-image-captioning'
-				},
-				{ wait_for_model: true }
-			)
-		).generated_text;
-	}
+export const imageToTextTool: Tool<
+  ImageToTextArgs["data"],
+  ImageToTextOutput["generated_text"]
+> = {
+  name: "imageToText",
+  description: "Caption an image.",
+  examples: [
+    {
+      prompt: "Describe the image",
+      command: "imageToText(image)",
+    },
+  ],
+  call: async (input) => {
+    return (
+      await getInference().imageToText(
+        {
+          data: await input,
+          model: "nlpconnect/vit-gpt2-image-captioning",
+        },
+        { wait_for_model: true }
+      )
+    ).generated_text;
+  },
 };

src/lib/agents/tools/index.ts

@@ -1,13 +1,11 @@
-import { textToImageTool } from './textToImage';
-import { textToSpeechTool } from './textToSpeech';
-import { speechToTextTool } from './speechToText';
-import { imageToTextTool } from './imageToText';
-import { messageTool } from './message';
+import { textToImageTool } from "./textToImage";
+import { textToSpeechTool } from "./textToSpeech";
+import { speechToTextTool } from "./speechToText";
+import { imageToTextTool } from "./imageToText";
 
 export const tools = [
-	textToImageTool,
-	textToSpeechTool,
-	speechToTextTool,
-	imageToTextTool,
-	messageTool
+  textToImageTool,
+  textToSpeechTool,
+  speechToTextTool,
+  imageToTextTool,
 ];

src/lib/agents/tools/message.ts

@@ -1,23 +1,23 @@
-import type { Tool } from './tool';
+import type { Tool } from "./tool";
 
 export const messageTool: Tool<Promise<Blob | string> | string, void> = {
-	name: 'message',
-	description: 'Send data back to the user.',
-	examples: [
-		{
-			prompt: 'Display the created image',
-			command: 'message("we display the image", image)'
-		},
-		{
-			prompt: 'Display the generated text',
-			command: 'message("we render the text", text)'
-		},
-		{
-			prompt: 'Display the text "hello world"',
-			command: 'message("hello world")'
-		}
-	],
-	call: async () => {
-		return;
-	}
+  name: "message",
+  description: "Send data back to the user.",
+  examples: [
+    {
+      prompt: "Display the created image",
+      command: 'message("we display the image", image)',
+    },
+    {
+      prompt: "Display the generated text",
+      command: 'message("we render the text", text)',
+    },
+    {
+      prompt: 'Display the text "hello world"',
+      command: 'message("hello world")',
+    },
+  ],
+  call: async () => {
+    return;
+  },
 };

src/lib/agents/tools/speechToText.ts

@@ -1,31 +1,31 @@
-import { getInference } from '$lib/agents/getInference';
+import { getInference } from "$lib/agents/getInference";
 import type {
-	AutomaticSpeechRecognitionArgs,
-	AutomaticSpeechRecognitionOutput
-} from '@huggingface/inference';
-import type { Tool } from './tool';
+  AutomaticSpeechRecognitionArgs,
+  AutomaticSpeechRecognitionOutput,
+} from "@huggingface/inference";
+import type { Tool } from "./tool";
 
 export const speechToTextTool: Tool<
-	AutomaticSpeechRecognitionArgs['data'],
-	AutomaticSpeechRecognitionOutput['text']
+  AutomaticSpeechRecognitionArgs["data"],
+  AutomaticSpeechRecognitionOutput["text"]
 > = {
-	name: 'speechToText',
-	description: 'Caption an audio file and returns its text content.',
-	examples: [
-		{
-			prompt: 'Transcribe the sound file',
-			command: 'speechToText(audio)'
-		}
-	],
-	call: async (data) => {
-		return (
-			await getInference().automaticSpeechRecognition(
-				{
-					data: await data,
-					model: 'facebook/wav2vec2-large-960h-lv60-self'
-				},
-				{ wait_for_model: true }
-			)
-		).text;
-	}
+  name: "speechToText",
+  description: "Caption an audio file and returns its text content.",
+  examples: [
+    {
+      prompt: "Transcribe the sound file",
+      command: "speechToText(audio)",
+    },
+  ],
+  call: async (data) => {
+    return (
+      await getInference().automaticSpeechRecognition(
+        {
+          data: await data,
+          model: "facebook/wav2vec2-large-960h-lv60-self",
+        },
+        { wait_for_model: true }
+      )
+    ).text;
+  },
 };

src/lib/agents/tools/textToImage.ts

@@ -1,27 +1,33 @@
-import { getInference } from '$lib/agents/getInference';
-import type { TextToImageArgs, TextToImageOutput } from '@huggingface/inference';
-import type { Tool } from './tool';
+import { getInference } from "$lib/agents/getInference";
+import type {
+  TextToImageArgs,
+  TextToImageOutput,
+} from "@huggingface/inference";
+import type { Tool } from "./tool";
 
-export const textToImageTool: Tool<TextToImageArgs['inputs'], TextToImageOutput> = {
-	name: 'textToImage',
-	description: 'Generate an image from a text prompt.',
-	examples: [
-		{
-			prompt: 'Generate an image of a cat wearing a top hat',
-			command: "textToImage('cat wearing a top hat')"
-		},
-		{
-			prompt: 'Draw a brown dog on a beach',
-			command: "textToImage('drawing of a brown dog on a beach')"
-		}
-	],
-	call: async (input) => {
-		return await getInference().textToImage(
-			{
-				inputs: await input,
-				model: 'stabilityai/stable-diffusion-2'
-			},
-			{ wait_for_model: true }
-		);
-	}
+export const textToImageTool: Tool<
+  TextToImageArgs["inputs"],
+  TextToImageOutput
+> = {
+  name: "textToImage",
+  description: "Generate an image from a text prompt.",
+  examples: [
+    {
+      prompt: "Generate an image of a cat wearing a top hat",
+      command: "textToImage('cat wearing a top hat')",
+    },
+    {
+      prompt: "Draw a brown dog on a beach",
+      command: "textToImage('drawing of a brown dog on a beach')",
+    },
+  ],
+  call: async (input) => {
+    return await getInference().textToImage(
+      {
+        inputs: await input,
+        model: "stabilityai/stable-diffusion-2",
+      },
+      { wait_for_model: true }
+    );
+  },
 };

src/lib/agents/tools/textToSpeech.ts

@@ -1,25 +1,34 @@
-import { getInference } from '$lib/agents/getInference';
-import type { TextToSpeechArgs, TextToSpeechOutput } from '@huggingface/inference';
+import { getInference } from "$lib/agents/getInference";
+import type {
+  TextToSpeechArgs,
+  TextToSpeechOutput,
+} from "@huggingface/inference";
 
-import type { Tool } from './tool';
+import type { Tool } from "./tool";
 
-export const textToSpeechTool: Tool<TextToSpeechArgs['inputs'], TextToSpeechOutput> = {
-	name: 'textToSpeech',
-	description: 'This tool takes a text input and turns it into an audio file.',
-	examples: [
-		{
-			prompt: 'Say the following out loud:"Hello world!"',
-			command: "textToSpeech('Hello world!')"
-		},
-		{ prompt: 'Say the content of the string txt out loud', command: 'textToSpeech(txt)' }
-	],
-	call: async (input) => {
-		return await getInference().textToSpeech(
-			{
-				inputs: await input,
-				model: 'espnet/kan-bayashi_ljspeech_vits'
-			},
-			{ wait_for_model: true }
-		);
-	}
+export const textToSpeechTool: Tool<
+  TextToSpeechArgs["inputs"],
+  TextToSpeechOutput
+> = {
+  name: "textToSpeech",
+  description: "This tool takes a text input and turns it into an audio file.",
+  examples: [
+    {
+      prompt: 'Say the following out loud:"Hello world!"',
+      command: "textToSpeech('Hello world!')",
+    },
+    {
+      prompt: "Say the content of the string txt out loud",
+      command: "textToSpeech(txt)",
+    },
+  ],
+  call: async (input) => {
+    return await getInference().textToSpeech(
+      {
+        inputs: await input,
+        model: "espnet/kan-bayashi_ljspeech_vits",
+      },
+      { wait_for_model: true }
+    );
+  },
 };

src/lib/agents/tools/tool.ts

@@ -1,9 +1,9 @@
 export interface Tool<Input, Output> {
-	name: string;
-	description: string;
-	examples: Array<{
-		prompt: string;
-		command: string;
-	}>;
-	call: (input: Promise<Input> | Input) => Promise<Output>;
+  name: string;
+  description: string;
+  examples: Array<{
+    prompt: string;
+    command: string;
+  }>;
+  call: (input: Promise<Input> | Input) => Promise<Output>;
 }

src/lib/components/CodePreview.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    export let codePromise: Promise<string>
+    export let onRun: (code: string) => void;
+</script>
+
+{#await codePromise}
+    <div class="loading loading-lg mx-auto" />
+{:then code}
+    <div class="mockup-code text-sm">
+        <pre class="ml-4"><code>{code}</code></pre>
+    </div>
+
+    <button
+        class="btn btn-primary w-fit mx-auto"
+        on:click={() => {
+            onRun(code);
+        }}
+    >
+        run code
+    </button>
+{/await}

src/lib/components/FileUpload.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let files: FileList | null = null;
+</script>
+
+<div class="grid grid-cols-2 gap-5">
+    <div class="form-control">
+        <label class="label">
+            <span class="label-text">
+                {#if files && files.length > 0}
+                    {files[0].type.split('/')[0]} detected
+                    <button class="btn-sm btn btn-ghost" on:click={() => (files = null)}>clear </button>
+                {:else}
+                    Upload a file (image or audio)
+                {/if}
+            </span>
+        </label>
+        <input
+            type="file"
+            bind:files
+            accept="audio/*, image/*"
+            class="mt-auto file-input file-input-bordered max-w-xs"
+            class:file-input-primary={files && files.length > 0}
+        />
+    </div>
+</div>

src/lib/components/ResultsDisplay.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    export let messages: Array<{ message: string; data: string | Blob | undefined }>;
+
+	const isBlob = (message: string | Blob): message is Blob => {
+		return message instanceof Blob;
+	};
+    
+</script>
+
+<div class="join join-vertical w-full">
+    {#each messages as message}
+        <div class="collapse collapse-arrow join-item border border-base-300">
+            <input type="radio" name="my-accordion-4" checked={true} />
+            <div class="collapse-title text-xl font-medium">
+                {message.message}
+            </div>
+            <div class="collapse-content">
+                {#if !!message.data && isBlob(message.data)}
+                    {#if message.data.type.startsWith('image')}
+                        <img class="mx-auto" alt="generated" src={URL.createObjectURL(message.data)} />
+                    {:else if message.data.type.startsWith('audio')}
+                        <audio controls src={URL.createObjectURL(message.data)} />
+                    {:else}
+                        <p class="text-mono text-light w-full">blob type unknown</p>
+                    {/if}
+                {:else if !!message.data}
+                    <p class="text-mono text-light w-full">{message.data}</p>
+                {/if}
+            </div>
+        </div>
+    {/each}
+</div>

src/lib/components/ToolSelector.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { tools } from '$lib/agents/tools';
+    export let selectedTools: Array<string> = [];
+</script>
+
+    <h3 class="text-lg w-fit mx-auto">Select your tools</h3>
+
+<div class="w-fit mx-auto">
+
+<div class="join mx-auto inline-block">
+    {#each tools as tool}
+        <label
+            class="form-switch join-item btn normal-case btn-sm"
+            class:btn-info={selectedTools.includes(tool.name)}
+        >
+            <input
+                class="hidden"
+                type="checkbox"
+                bind:group={selectedTools}
+                name="tools"
+                value={tool.name}
+            />
+            {tool.name}
+        </label>
+    {/each}
+</div>
+{#if selectedTools.length === tools.length}
+<button class='btn btn-ghost inline-block w-fit btn-sm' on:click={() => (selectedTools = [])}>clear</button>
+{:else}
+<button class='btn btn-ghost inline-block w-fit btn-sm' on:click={() => (selectedTools = tools.map((el) => el.name))}>select all</button>
+{/if}
+</div>

src/lib/store.ts

@@ -1,12 +1,16 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
 
 // Set the stored value or a sane default.
-export const HF_ACCESS_TOKEN = writable((browser && localStorage.HF_ACCESS_TOKEN) || '');
+export const HF_ACCESS_TOKEN = writable(
+  (browser && localStorage.HF_ACCESS_TOKEN) || ""
+);
 
-export const OPENAI_API_KEY = writable((browser && localStorage.OPENAI_API_KEY) || '');
+export const OPENAI_API_KEY = writable(
+  (browser && localStorage.OPENAI_API_KEY) || ""
+);
 
 if (browser) {
-	HF_ACCESS_TOKEN.subscribe((value) => (localStorage.content = value));
-	OPENAI_API_KEY.subscribe((value) => (localStorage.content = value));
+  HF_ACCESS_TOKEN.subscribe((value) => (localStorage.content = value));
+  OPENAI_API_KEY.subscribe((value) => (localStorage.content = value));
 }

src/routes/+page.svelte

@@ -3,6 +3,10 @@
 	import { generateCode } from '$lib/agents/generateCode';
 	import { tools } from '$lib/agents/tools';
 	import { evalBuilder } from '$lib/agents/evalBuilder';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import ToolSelector from '$lib/components/ToolSelector.svelte';
+	import CodePreview from '$lib/components/CodePreview.svelte';
+	import ResultsDisplay from '$lib/components/ResultsDisplay.svelte';
 
 	let prompt = 'Draw a picture of a cat wearing a top hat. Then caption the picture and read it out loud.';
 	let selectedTools: Array<string> = [];
@@ -16,7 +20,7 @@
 		messages = [];
 		codePromise = generateCode(
 			prompt,
-			tools.filter((el) => el.name === 'message' || selectedTools.includes(el.name)),
+			tools.filter((el) => selectedTools.includes(el.name)),
 			files
 		);
 	};
@@ -26,7 +30,7 @@
 
 		const wrapperEval = await evalBuilder(
 			code,
-			tools.filter((el) => el.name === 'message' || selectedTools.includes(el.name)),
+			tools.filter((el) => selectedTools.includes(el.name)),
 			files,
 			(message, data) => {
 				messages = [...messages, { message, data }];
@@ -38,9 +42,6 @@
 		isLoading = false;
 	};
 
-	const isBlob = (message: string | Blob): message is Blob => {
-		return message instanceof Blob;
-	};
 </script>
 
 <div class="flex flex-col space-y-4 max-w-xl">
@@ -49,108 +50,32 @@
 		<h1 class="text-3xl font-semibold w-fit mx-auto">Agents.js</h1>
 	</div>
 	<div class="divider" />
-	<h3 class="text-lg w-fit mx-auto">Select your tools</h3>
-
-	<div class="join mx-auto">
-		{#each tools.filter((tool) => tool.name != 'message') as tool}
-			<label
-				class="form-switch join-item btn normal-case btn-sm"
-				class:btn-info={selectedTools.includes(tool.name)}
-			>
-				<input
-					class="hidden"
-					type="checkbox"
-					bind:group={selectedTools}
-					name="tools"
-					value={tool.name}
-				/>
-				{tool.name}
-			</label>
-		{/each}
-	</div>
+	<ToolSelector bind:selectedTools />
 	<div class="divider" />
 	<span class="label-text"> Input your request </span>
-
 	<textarea
 		class="textarea border-base-300 bg-base-300"
 		placeholder="Ask something here"
 		bind:value={prompt}
 	/>
-
-	<div class="grid grid-cols-2 gap-5">
-		<div class="form-control">
-			<label class="label">
-				<span class="label-text">
-					{#if files && files.length > 0}
-						{files[0].type.split('/')[0]} detected
-						<button class="btn-sm btn btn-ghost" on:click={() => (files = null)}>clear </button>
-					{:else}
-						Upload a file (image or audio)
-					{/if}
-				</span>
-			</label>
-			<input
-				type="file"
-				bind:files
-				accept="audio/*, image/*"
-				class="mt-auto file-input file-input-bordered max-w-xs"
-				class:file-input-primary={files && files.length > 0}
-			/>
-		</div>
-
-		<button
-			class="btn btn-primary mt-auto"
-			on:click={onGenerate}
-			on:keypress={onGenerate}
-			disabled={selectedTools.length === 0}>generate</button
-		>
-	</div>
+	<FileUpload bind:files/>
+	<button
+		class="btn btn-primary mt-auto"
+		on:click={onGenerate}
+		on:keypress={onGenerate}
+		disabled={selectedTools.length === 0}>generate</button
+	>
 
 	{#if codePromise}
-		{#await codePromise}
-			<div class="loading loading-lg mx-auto" />
-		{:then code}
-			<div class="mockup-code text-sm">
-				<pre class="ml-4"><code>{code}</code></pre>
-			</div>
-
-			<button
-				class="btn btn-primary w-fit mx-auto"
-				on:click={() => {
-					onRun(code);
-				}}
-			>
-				run code
-			</button>
-		{/await}
+		<CodePreview bind:codePromise onRun={onRun}/>
 	{/if}
+
 	<div class="divider" />
 	{#if isLoading}
 		<div class="loading loading-lg mx-auto" />
 	{:else if messages.length > 0}
 		<h3 class="text-lg w-fit mx-auto">Results</h3>
 	{/if}
-	<div class="join join-vertical w-full">
-		{#each messages as message}
-			<div class="collapse collapse-arrow join-item border border-base-300">
-				<input type="radio" name="my-accordion-4" checked={true} />
-				<div class="collapse-title text-xl font-medium">
-					{message.message}
-				</div>
-				<div class="collapse-content">
-					{#if !!message.data && isBlob(message.data)}
-						{#if message.data.type.startsWith('image')}
-							<img class="mx-auto" alt="generated" src={URL.createObjectURL(message.data)} />
-						{:else if message.data.type.startsWith('audio')}
-							<audio controls src={URL.createObjectURL(message.data)} />
-						{:else}
-							<p class="text-mono text-light w-full">blob type unknown</p>
-						{/if}
-					{:else if !!message.data}
-						<p class="text-mono text-light w-full">{message.data}</p>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	</div>
+
+	<ResultsDisplay bind:messages />
 </div>