Generating...
-Error generating content
'+ partial.replace(/({
- prompt: buildSuggestionsPrompt({ src, prompt, schema }),
+ messages: [buildSuggestionsPrompt({ src, prompt, schema }), '```json\n{"suggestions":['],
system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.`,
mode: "json",
});
const suggestions = getSuggestions({ result: suggestionsResult });
tap({ suggestions });
- const { result: htmlResult, pending: htmlPending } = generateData<{ html: string }>({
- prompt: buildUiPrompt({ prompt, lastSrc }),
+ const { result: htmlResult, pending: htmlPending, partial: partialHtml } = generateData<{ html: string }>({
+ messages: [buildUiPrompt({ prompt, lastSrc }), '```html\n'],
system: viewSystemPrompt({ schema }),
mode: "html",
});
- src = maybeHTML({ result: htmlResult, pending: htmlPending });
+ src = maybeHTML({ result: htmlResult });
+ let preview = maybeSRC({ src, pending: htmlPending, partial: partialHtml });
+ tap({ preview })
let firstSuggestion = getSuggestion({ suggestions, index: 0 });
let secondSuggestion = getSuggestion({ suggestions, index: 1 });
@@ -252,7 +248,7 @@ export const iframe = recipe<{
placeholder="title"
oncommon-input=${updateValue({ value: title })}
>
- View Data
= new Map();
-
- create(
- system: string,
- initialMessage: string,
- activeTools: CoreTool[]
- ): ConversationThread {
- const id = crypto.randomUUID();
- const thread: ConversationThread = {
- id,
- conversation: [
- {
- role: "user",
- content: [{ type: "text", text: initialMessage }],
- },
- ],
- system,
- activeTools,
- };
- this.threads.set(id, thread);
- return thread;
- }
-
- get(id: string): ConversationThread | undefined {
- return this.threads.get(id);
- }
-
- update(id: string, newMessages: CoreMessage[]): void {
- const thread = this.threads.get(id);
- if (thread) {
- thread.conversation = [...thread.conversation, ...newMessages];
- }
- }
-
- delete(id: string): void {
- this.threads.delete(id);
- }
-}
diff --git a/typescript/packages/planning-server/src/conversation_test.ts b/typescript/packages/planning-server/src/conversation_test.ts
deleted file mode 100644
index 2ea41b4be..000000000
--- a/typescript/packages/planning-server/src/conversation_test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { assertEquals } from "https://deno.land/std/testing/asserts.ts";
-import { InMemoryConversationThreadManager } from "./conversation.ts";
-
-Deno.test("ThreadManager - Create and Get Thread", () => {
- const manager = new InMemoryConversationThreadManager();
- const thread = manager.create("system prompt", "initial message", []);
-
- assertEquals(thread.system, "system prompt");
- assertEquals(thread.conversation.length, 1);
- assertEquals(thread.conversation[0].role, "user");
- assertEquals(thread.conversation[0].content[0].text, "initial message");
-
- const retrievedThread = manager.get(thread.id);
- assertEquals(retrievedThread, thread);
-});
-
-Deno.test("ThreadManager - Update Thread", () => {
- const manager = new InMemoryConversationThreadManager();
- const thread = manager.create("system prompt", "initial message", []);
-
- manager.update(thread.id, [
- {
- role: "assistant",
- content: [{ type: "text", text: "Hello! How can I help you?" }],
- },
- ]);
-
- const updatedThread = manager.get(thread.id);
- assertEquals(updatedThread?.conversation.length, 2);
- assertEquals(updatedThread?.conversation[1].role, "assistant");
- assertEquals(
- updatedThread?.conversation[1].content[0].text,
- "Hello! How can I help you?",
- );
-});
-
-Deno.test("ThreadManager - Set Pending Tool Calls", () => {
- const manager = new InMemoryConversationThreadManager();
- const thread = manager.create("system prompt", "initial message", []);
-
- const toolCalls = [
- { type: "tool_use", tool: { name: "calculator", arguments: "1 + 1" } },
- ];
- manager.setPendingToolCalls(thread.id, toolCalls);
-
- const updatedThread = manager.get(thread.id);
- assertEquals(updatedThread?.pendingToolCalls, toolCalls);
-});
-
-Deno.test("ThreadManager - Delete Thread", () => {
- const manager = new InMemoryConversationThreadManager();
- const thread = manager.create("system prompt", "initial message", []);
-
- manager.delete(thread.id);
-
- const deletedThread = manager.get(thread.id);
- assertEquals(deletedThread, undefined);
-});
diff --git a/typescript/packages/planning-server/src/deps.ts b/typescript/packages/planning-server/src/deps.ts
deleted file mode 100644
index 7d28ce8d0..000000000
--- a/typescript/packages/planning-server/src/deps.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// deps.ts
-export { default as datascript } from "npm:datascript";
-import { config } from "https://deno.land/x/dotenv/mod.ts";
-export { serve } from "https://deno.land/std@0.140.0/http/server.ts";
-
-export * as ai from "npm:ai";
-export { anthropic } from "npm:@ai-sdk/anthropic";
-
-await config({ export: true });
diff --git a/typescript/packages/planning-server/src/index.ts b/typescript/packages/planning-server/src/index.ts
index 13890e2a7..028882564 100755
--- a/typescript/packages/planning-server/src/index.ts
+++ b/typescript/packages/planning-server/src/index.ts
@@ -1,64 +1,120 @@
-#!/usr/bin/env -S deno run --allow-net --allow-read --allow-env
-
-import { crypto } from "https://deno.land/std/crypto/mod.ts";
+import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
+import { streamText } from "npm:ai";
import { ensureDir } from "https://deno.land/std/fs/mod.ts";
-import { CoreAssistantMessage, CoreMessage, CoreTool } from "npm:ai";
-import { ask } from "./anthropic.ts";
-import {
- ConversationThread,
- InMemoryConversationThreadManager,
-} from "./conversation.ts";
-import { serve } from "./deps.ts";
-
-const threadManager = new InMemoryConversationThreadManager();
+import { crypto } from "https://deno.land/std/crypto/mod.ts";
+import { anthropic } from "npm:@ai-sdk/anthropic";
const CACHE_DIR = "./cache";
-type CreateConversationThreadRequest = {
- action: "create";
- message: string;
- system: string;
- activeTools: CoreTool[];
-};
-
-type AppendToConversationThreadRequest = {
- action: "append";
- threadId: string;
- message?: string;
-};
-
-type ConversationThreadRequest =
- | CreateConversationThreadRequest
- | AppendToConversationThreadRequest;
-
const handler = async (request: Request): Promise => {
if (request.method === "GET") {
- return new Response("Planning Server", { status: 200 });
- } else if (request.method === "POST") {
+ return new Response("Hello World");
+ }
+
+ if (request.method === "POST") {
try {
- const body: ConversationThreadRequest = await request.json();
- const { action } = body;
+ const payload = await request.json() as {
+ messages: Array<{ role: string; content: string }>;
+ system: string;
+ model: string;
+ max_tokens: number;
+ stream: boolean; // LLM streams regardless, this is if we stream to the client
+ };
+
+ const description = JSON.stringify(payload.messages).slice(0, 80);
+
+ const cacheKey = await hashKey(JSON.stringify(payload));
+ const cachedResult = await loadCacheItem(cacheKey);
+ if (cachedResult) {
+ console.log("Cache hit:", description);
+ return new Response(JSON.stringify(cachedResult), {
+ headers: { "Content-Type": "application/json" },
+ });
+ }
- switch (action) {
- case "create": {
- const { message, system, activeTools } = body;
- return handleCreateConversationThread(system, message, activeTools);
- }
- case "append": {
- const { threadId, message } = body;
- return handleAppendToConversationThread(threadId, message);
- }
- default:
- return new Response(JSON.stringify({ error: "Invalid action" }), {
- status: 400,
+ console.log("Cache miss:", description);
+
+ let messages = payload.messages;
+
+ let params = {
+ model: payload.model,
+ system: payload.system,
+ messages,
+ }
+
+ const { textStream } = await streamText({
+ ...params,
+ model: anthropic(payload.model)
+ });
+
+ let result = "";
+
+ if (messages[messages.length - 1].role === "assistant") {
+ result = messages[messages.length - 1].content;
+ }
+
+ if (payload.stream) {
+ const stream = new ReadableStream({
+ async start(controller) {
+ if (messages[messages.length - 1].role === "assistant") {
+ controller.enqueue(new TextEncoder().encode(result + '\n'));
+ }
+ for await (const delta of textStream) {
+ result += delta;
+ controller.enqueue(new TextEncoder().encode(delta + '\n'));
+ }
+
+ if (messages[messages.length - 1].role === "user") {
+ messages.push({ role: "assistant", content: result });
+ } else {
+ messages[messages.length - 1].content = result;
+ }
+ await saveCacheItem(cacheKey, params); // after finishing, save!
+ controller.close();
+ },
+ });
+
+ return new Response(stream, {
+ headers: {
+ "Content-Type": "text/event-stream",
+ "Transfer-Encoding": "chunked"
+ },
+ });
+ }
+
+ for await (const delta of textStream) {
+ result += delta;
+ }
+
+ if (!result) {
+ return new Response(
+ JSON.stringify({ error: "No response from LLM" }),
+ {
+ status: 500,
headers: { "Content-Type": "application/json" },
- });
+ }
+ );
}
- } catch (error) {
- return new Response(JSON.stringify({ error: error.message }), {
- status: 400,
+
+ if (messages[messages.length - 1].role === "user") {
+ messages.push({ role: "assistant", content: result });
+ } else {
+ messages[messages.length - 1].content = result;
+ }
+
+ await saveCacheItem(cacheKey, params);
+
+ return new Response(JSON.stringify(params), {
headers: { "Content-Type": "application/json" },
});
+ } catch (error) {
+ return new Response(
+ JSON.stringify({ error: (error as Error).message }),
+ {
+ status: 400,
+ headers: { "Content-Type": "application/json" },
+ }
+ );
}
} else {
return new Response("Please send a POST request", { status: 405 });
@@ -92,134 +148,6 @@ async function saveCacheItem(key: string, data: any): Promise {
await Deno.writeTextFile(filePath, JSON.stringify(data, null, 2));
}
-async function handleCreateConversationThread(
- system: string,
- message: string,
- activeTools: CoreTool[]
-): Promise {
- const cacheKey = `${system}:${message}`;
-
- const cachedResult = await loadCacheItem(cacheKey);
- if (cachedResult) {
- console.log(
- "Cache hit!",
- (cacheKey.slice(0, 20) + "..." + cacheKey.slice(-20)).replaceAll("\n", "")
- );
- return new Response(JSON.stringify(cachedResult), {
- headers: { "Content-Type": "application/json" },
- });
- }
-
- const thread = threadManager.create(system, message, activeTools);
- const result = await processConversationThread(thread);
- if (result.type === "error") {
- return new Response(JSON.stringify(result), {
- status: 400,
- headers: { "Content-Type": "application/json" },
- });
- }
-
- if (result.assistantResponse) {
- threadManager.update(thread.id, [result.assistantResponse]);
- }
-
- await saveCacheItem(cacheKey, result);
-
- return new Response(JSON.stringify(result), {
- headers: { "Content-Type": "application/json" },
- });
-}
-
-async function handleAppendToConversationThread(
- threadId: string,
- message?: string
-): Promise {
- const thread = threadManager.get(threadId);
- if (!thread) {
- return new Response(JSON.stringify({ error: "Thread not found" }), {
- status: 404,
- headers: { "Content-Type": "application/json" },
- });
- }
-
- if (message) {
- threadManager.update(threadId, [
- {
- role: "user",
- content: message,
- },
- ]);
- }
-
- const result = await processConversationThread(thread);
- if (result.type === "error") {
- return new Response(JSON.stringify(result), {
- status: 400,
- headers: { "Content-Type": "application/json" },
- });
- }
-
- // Update the thread with the assistant's response
- if (result.assistantResponse) {
- threadManager.update(threadId, [result.assistantResponse]);
- }
-
- // Remove the assistantResponse from the result before sending it to the client
- const { assistantResponse, ...responseToClient } = result;
-
- return new Response(JSON.stringify(responseToClient), {
- headers: { "Content-Type": "application/json" },
- });
-}
-
-type ProcessConversationThreadResult =
- | {
- type: "success";
- threadId: string;
- output: string;
- assistantResponse: CoreAssistantMessage;
- conversation: CoreMessage[];
- }
- | { type: "error"; error: string };
-
-async function processConversationThread(
- thread: ConversationThread
-): Promise {
- console.log("Thread", thread);
-
- const result = await ask(
- thread.conversation,
- thread.system,
- thread.activeTools
- );
- if (!result) {
- return { type: "error", error: "No response from Anthropic" };
- }
-
- // Find the new assistant's response (it should be the last message)
- const assistantResponse = result[result.length - 1];
- if (assistantResponse.role !== "assistant") {
- return { type: "error", error: "No assistant response found" };
- }
-
- if (Array.isArray(assistantResponse.content)) {
- assistantResponse.content = assistantResponse.content
- .filter((msg) => msg.type == "text")
- .map((msg) => msg.text)
- .join(" ");
- }
-
- const output = assistantResponse.content;
- console.log("Output=", output);
- return {
- type: "success",
- threadId: thread.id,
- output,
- assistantResponse,
- conversation: result,
- };
-}
-
const port = Deno.env.get("PORT") || "8000";
console.log(`HTTP webserver running. Access it at: http://localhost:${port}/`);
await serve(handler, { port: parseInt(port) });
From cae1d28b31eeaae9e3ad625fa766197b8450daf2 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Fri, 4 Oct 2024 16:12:32 -0400
Subject: [PATCH 02/19] more progress cleaning up streaming
---
.../src/builtins/generate-data.ts | 107 ++++-------
.../packages/common-runner/src/llm-client.ts | 41 ++--
.../packages/llm-client/src/dummy-data.ts | 28 ---
typescript/packages/llm-client/src/index.ts | 180 +++++++-----------
.../src/recipes/annotation.ts | 32 ++--
.../src/recipes/dataDesigner.ts | 6 +-
.../src/recipes/iframe.ts | 29 ++-
.../src/recipes/luft-bnb-search.ts | 4 +-
.../lookslike-high-level/src/recipes/wiki.ts | 9 +-
.../packages/planning-server/src/index.ts | 16 +-
10 files changed, 186 insertions(+), 266 deletions(-)
delete mode 100644 typescript/packages/llm-client/src/dummy-data.ts
diff --git a/typescript/packages/common-runner/src/builtins/generate-data.ts b/typescript/packages/common-runner/src/builtins/generate-data.ts
index 7a76ebb75..43d541c11 100644
--- a/typescript/packages/common-runner/src/builtins/generate-data.ts
+++ b/typescript/packages/common-runner/src/builtins/generate-data.ts
@@ -2,9 +2,9 @@ import { type Node } from "@commontools/common-builder";
import { cell, CellImpl, ReactivityLog } from "../cell.js";
import { sendValueToBinding, findAllAliasedCells } from "../utils.js";
import { schedule, Action } from "../scheduler.js";
-import { generateData as generateDataClient } from "@commontools/llm-client";
+import { SimpleMessage } from "@commontools/llm-client";
import { mapBindingsToCell, normalizeToCells } from "../utils.js";
-import { mockResultClient } from "../llm-client.js";
+import { makeClient, dataRequest } from "../llm-client.js";
// TODO: generateData should really be a recipe, not a builtin, and either the
// underlying llm client call or even just fetch the built-in.
@@ -77,77 +77,48 @@ export function generateData(
fullResult.setAtPath([], undefined, log);
partialResult.setAtPath([], undefined, log);
- let resultPromise: Promise;
- let fullMessages = messages?.map((message, index) => ({ role: index % 2 === 0 ? "user" : "assistant", content: message }))
-
- if (system) {
- resultPromise = fetch("/api/llm", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
- messages: fullMessages,
- system,
- model: "claude-3-5-sonnet-20240620",
- max_tokens: 4096,
- stream: true
- })
- }).then(async (response) => {
- if (!response.body) {
- throw new Error("No response body");
- }
-
- // if json, just return the response
- if (response.headers.get("content-type") === "application/json") {
- return response.json().then((data) => {
- let messages = data['messages']
- let lastMessage = messages[messages.length - 1]
- console.log("lastMessage", lastMessage)
- return grab(lastMessage['content'])
- });
- }
-
- const reader = response.body.getReader();
- const decoder = new TextDecoder();
- let doneReading = false;
- let partialText = "";
-
- while (!doneReading) {
- const { value, done } = await reader.read();
- doneReading = done;
- if (value) {
- const chunk = decoder.decode(value, { stream: true });
- partialText += chunk.slice(0, -1); // remove the \n
- partialResult.setAtPath([], partialText, log);
- }
- }
-
- return grab(partialText);
- }).catch((err) => {
- console.error(err);
- pending.setAtPath([], false, log);
- });
- } else {
- resultPromise = generateDataClient(
- mockResultClient,
- messages[messages.length - 1],
- result,
- schema
- );
- }
+ let fullMessages: SimpleMessage[] = (messages || []).map(
+ (message, index) => ({ role: index % 2 === 0 ? "user" : "assistant", content: message })
+ );
+
+ // FIXME(ja): lack of system prompt => "create system prompt about json":
+ let effectiveSystem = system || dataRequest({
+ description: "hmm",
+ inputData: result,
+ jsonSchema: schema,
+ })
+
+ const updatePartial = (t: string) => partialResult.setAtPath([], t, log);
+
+ let resultPromise = makeClient().sendRequest({
+ messages: fullMessages,
+ system: effectiveSystem,
+ model: "claude-3-5-sonnet-20240620",
+ max_tokens: 4096,
+ }, updatePartial)
const thisRun = ++currentRun;
- resultPromise.then((result) => {
- if (thisRun !== currentRun) return;
+ resultPromise
+ .then((a: SimpleMessage) => {
+ console.log("result", a);
+ return a;
+ })
+ .then((assistant: SimpleMessage) => grab(assistant.content))
+ .then((result) => {
+ if (thisRun !== currentRun) return;
- normalizeToCells(result, undefined, log);
+ normalizeToCells(result, undefined, log);
- pending.setAtPath([], false, log);
- fullResult.setAtPath([], result, log);
- partialResult.setAtPath([], result, log);
- });
+ pending.setAtPath([], false, log);
+ fullResult.setAtPath([], result, log);
+ partialResult.setAtPath([], result, log);
+ }).catch((error) => {
+ console.error("Error generating data", error);
+ pending.setAtPath([], false, log);
+ fullResult.setAtPath([], undefined, log);
+ partialResult.setAtPath([], undefined, log);
+ });
};
schedule(startGeneration, {
diff --git a/typescript/packages/common-runner/src/llm-client.ts b/typescript/packages/common-runner/src/llm-client.ts
index d25fd17bd..6ca4306eb 100644
--- a/typescript/packages/common-runner/src/llm-client.ts
+++ b/typescript/packages/common-runner/src/llm-client.ts
@@ -1,23 +1,26 @@
import { LLMClient } from "@commontools/llm-client";
-export const LLM_SERVER_URL =
- window.location.protocol + "//" + window.location.host + "/api/llm";
-export const suggestionClient = new LLMClient({
- serverUrl: LLM_SERVER_URL,
- system:
- "You are an assistant that helps match user queries to relevant data gems based on their names and types.",
- tools: [],
-});
+export const suggestSystem = "You are an assistant that helps match user queries to relevant data gems based on their names and types."
+export const jsonDataRequest = `Generate dummy data as JSON as per the provided spec. Use the input to imagine what an API response would look like for a request.`
-export const mockResultClient = new LLMClient({
- serverUrl: LLM_SERVER_URL,
- system: `Generate dummy data as JSON as per the provided spec. Use the input to imagine what an API response would look like for a request.`,
- tools: [],
-});
+export const LLM_SERVER_URL = window.location.protocol + "//" + window.location.host + "/api/llm";
+export const makeClient = () => new LLMClient(LLM_SERVER_URL);
-export const makeClient = (system: string) =>
- new LLMClient({
- serverUrl: LLM_SERVER_URL,
- system,
- tools: [],
- });
+export function dataRequest({
+ description,
+ inputData,
+ jsonSchema,
+}: {
+ description: string;
+ inputData: any;
+ jsonSchema: any;
+}) {
+ return `You specialize in generating believable and useful data for testing applications during development. Take the provided input parameters and use them to hallucinate a plausible result that conforms to the following JSON schema:
+
+ ${JSON.stringify(jsonSchema)}
+
+ ${description}
+ ${JSON.stringify(inputData)}
+
+ Respond with only the generated data in a JSON block.`;
+}
diff --git a/typescript/packages/llm-client/src/dummy-data.ts b/typescript/packages/llm-client/src/dummy-data.ts
deleted file mode 100644
index 355fa7894..000000000
--- a/typescript/packages/llm-client/src/dummy-data.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Schema } from "@cfworker/json-schema";
-import { LLMClient } from "./index.js";
-
-export function grabJson(txt: string) {
- return JSON.parse(txt.match(/```json\n([\s\S]+?)```/)?.[1] ?? "{}");
-}
-
-export async function generateData(
- client: LLMClient,
- description: string,
- inputData: any,
- jsonSchema: Schema,
-) {
- const request = `
- You specialize in generating believable and useful data for testing applications during development. Take the provided input parameters and use them to hallucinate a plausible result that conforms to the following JSON schema:
-
- ${JSON.stringify(jsonSchema)}
-
- ${description}
- ${JSON.stringify(inputData)}
-
- Respond with only the generated data in a JSON block.`;
-
- const thread = await client.createThread(request);
- const response = thread.conversation[thread.conversation.length - 1];
-
- return grabJson(response) as T;
-}
diff --git a/typescript/packages/llm-client/src/index.ts b/typescript/packages/llm-client/src/index.ts
index 79d17350d..3b41262a1 100644
--- a/typescript/packages/llm-client/src/index.ts
+++ b/typescript/packages/llm-client/src/index.ts
@@ -1,59 +1,33 @@
-import { CoreMessage, CoreTool } from "ai";
-export * from "./dummy-data.js";
-
-export type LlmTool = CoreTool & {
- implementation: (input: any) => Promise | string;
-};
-
-export interface ClientConfig {
- serverUrl: string;
- tools: LlmTool[];
- system?: string;
+export type SimpleMessage = {
+ role: "user" | "assistant",
+ content: string,
}
-export class ConversationThread {
- constructor(
- private client: LLMClient,
- public id: string,
- public conversation: string[] = [],
- ) {
- this.client = client;
- this.id = id;
- this.conversation = conversation;
- }
-
- async sendMessage(message: string): Promise {
- const response: AppendThreadResponse = await this.client.continueThread(
- this.id,
- message,
- );
-
- this.conversation.push(`User: ${message}`);
- let assistantResponse = response.assistantResponse;
- this.conversation.push(`Assistant: ${assistantResponse.content}`);
-
- return response.output;
- }
+type LLMRequest = {
+ messages: SimpleMessage[],
+ system: string,
+ model: string,
+ max_tokens: number,
+ stream?: boolean,
}
+
export class LLMClient {
private serverUrl: string;
- private tools: LlmTool[];
- private system: string;
-
- constructor(config: ClientConfig) {
- this.serverUrl = config.serverUrl;
- this.tools = config.tools;
- this.system =
- config.system ||
- "You are a helpful assistant that uses the provided tools to create effect.";
+
+ constructor(serverUrl: string) {
+ this.serverUrl = serverUrl;
}
- private async sendRequest(body: any): Promise {
+ async sendRequest(userRequest: LLMRequest, partialCB?: (text: string) => void): Promise {
+ const fullRequest: LLMRequest = {
+ ...userRequest,
+ stream: partialCB ? true : false,
+ }
const response = await fetch(this.serverUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify(body),
+ body: JSON.stringify(fullRequest),
});
if (!response.ok) {
@@ -63,74 +37,64 @@ export class LLMClient {
);
}
- return await response.json();
- }
-
- async createThread(message: string): Promise {
- const request: CreateThreadRequest = {
- action: "create",
- system: this.system,
- message,
- activeTools: this.tools.map(({ implementation, ...tool }) => tool),
- };
-
- const response: CreateThreadResponse = await this.sendRequest(request);
- const thread = new ConversationThread(this, response.threadId);
+ if (!response.body) {
+ throw new Error("No response body");
+ }
- const initialAssistantResponse = response.output;
- thread.conversation.push(`User: ${message}`);
- thread.conversation.push(`Assistant: ${initialAssistantResponse}`);
+ // if server responds with json, just return the response
+ if (response.headers.get("content-type") === "application/json") {
+ return response.json() as Promise;
+ }
- return thread;
- }
+ let content = await this.stream(response.body, partialCB);
- async continueThread(
- threadId: string,
- message?: string,
- toolResponses: ToolResponse[] = [],
- ): Promise {
- const request: AppendThreadRequest = {
- action: "append",
- threadId,
- message,
- toolResponses,
- };
-
- return await this.sendRequest(request);
+ return { content, role: "assistant" };
}
-}
-// Types (you can move these to a separate file if desired)
-interface CreateThreadRequest {
- action: "create";
- system: string;
- message: string;
- activeTools: CoreTool[];
-}
-
-interface AppendThreadRequest {
- action: "append";
- threadId: string;
- message?: string;
- toolResponses: ToolResponse[];
-}
-
-interface CreateThreadResponse {
- threadId: string;
- output: string;
- assistantResponse: CoreMessage;
- conversation: CoreMessage[];
-}
+ private async stream(body: ReadableStream, cb?: (partial: string) => void): Promise {
+ const reader = body.getReader();
+ const decoder = new TextDecoder();
+
+ let doneReading = false;
+ let buffer = "";
+ let text = "";
+
+ while (!doneReading) {
+ const { value, done } = await reader.read();
+ doneReading = done;
+ if (value) {
+ const chunk = decoder.decode(value, { stream: true });
+ buffer += chunk;
+
+ let newlineIndex: number;
+ while ((newlineIndex = buffer.indexOf('\n')) >= 0) {
+ const line = buffer.slice(0, newlineIndex).trim();
+ buffer = buffer.slice(newlineIndex + 1);
+
+ if (line) {
+ try {
+ const t = JSON.parse(line);
+ text += t;
+ if (cb) cb(text);
+ } catch (error) {
+ console.error("Failed to parse JSON line:", line, error);
+ }
+ }
+ }
+ }
+ }
-interface AppendThreadResponse {
- threadId: string;
- assistantResponse: CoreMessage;
- output: string;
- conversation: CoreMessage[];
-}
+ // Handle any remaining buffer
+ if (buffer.trim()) {
+ try {
+ const t = JSON.parse(buffer.trim());
+ text += t;
+ if (cb) cb(text);
+ } catch (error) {
+ console.error("Failed to parse final JSON line:", buffer, error);
+ }
+ }
-interface ToolResponse {
- type: "tool_result";
- tool_use_id: string;
- content: { type: "text"; text: string }[];
+ return text;
+ }
}
diff --git a/typescript/packages/lookslike-high-level/src/recipes/annotation.ts b/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
index e82dca439..789d62102 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
@@ -36,26 +36,33 @@ const getCharmInfo = lift(({ charms }) => {
return charmInfo;
});
-const buildPrompt = lift(
- ({ query, charmInfo }) =>
- `Given the following user query and list of data charms, return the indices of the charms that are most relevant to the query.
+const buildMessages = lift(
+ ({ query, charmInfo }) => {
+
+ return [
+ `Given the following user query and list of data charms, return the indices of the charms that are most relevant to the query.
Consider both the names and types of the charms when making your selection.
Think broadly, e.g. a stay in a hotel could match a charm called "morning routine", as the user would want to pick a hotel that supports their morning routine.
-User query: "${query}"
+
+${query}
+
-Data:
+
${JSON.stringify(charmInfo, null, 2)}
+
Respond with only JSON array of suggestions, e.g.
\`\`\`json
-[{ index: 0, chosen: "work todo list", confidence: 0.9, reason: "the use of the "work projects" implies the user might want a connection to work TODOs" }, { index: 2, chosen: "hobby projects", confidence: 0.5, reason: "projects could be referring to personal projects, hard to tell from context" }, { index: 5, chosen: "suzy collab", reason: "could this be related to Susan? she appears in several project related lists", confidence: 0.33 }]
+[
+ { index: 0, chosen: "work todo list", confidence: 0.9, reason: "the use of the "work projects" implies the user might want a connection to work TODOs" },
+ { index: 2, chosen: "hobby projects", confidence: 0.5, reason: "projects could be referring to personal projects, hard to tell from context" },
+ { index: 5, chosen: "suzy collab", reason: "could this be related to Susan? she appears in several project related lists", confidence: 0.33 }
+]
\`\`\`
-
-notalk;justgo
-`
-);
+`, '```json\n['];
+ });
const filterMatchingCharms = lift<{
matchedIndices: { index: number; confidence: number }[];
@@ -164,9 +171,8 @@ export const annotation = recipe<{
const { result: matchedIndices } = generateData<
{ index: number; confidence: number }[]
>({
- prompt: buildPrompt({ query, charmInfo }),
- system:
- "You are an assistant that helps match user queries to relevant data charms based on their names and types.",
+ messages: buildMessages({ query, charmInfo }),
+ system: "You are an assistant that helps match user queries to relevant data charms based on their names and types.",
});
const matchingCharms = filterMatchingCharms({ matchedIndices, charmInfo });
const suggestion = findSuggestion({ matchingCharms, data });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts b/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
index 4a458cb1d..7337ca883 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
@@ -53,13 +53,13 @@ const addToPrompt = handler<
state.query = state.prompt;
});
-const buildJSONGenPrompt = lift(({ prompt, data }) => {
+const buildJSONGenMessages = lift(({ prompt, data }) => {
console.log("prompt", prompt, data);
let fullPrompt = prompt;
if (data) {
fullPrompt += `\n\nHere's the previous JSON for reference:\n\`\`\`json\n${JSON.stringify(data, null, 2)}\n\`\`\``;
}
- return fullPrompt;
+ return [fullPrompt, '```json\n']
});
const onAcceptData = handler(
@@ -86,7 +86,7 @@ export const dataDesigner = recipe<{
tap({ lastData });
const { result } = generateData({
- prompt: buildJSONGenPrompt({ prompt, data: lastData }),
+ messages: buildJSONGenMessages({ prompt, data: lastData }),
system: systemPrompt,
mode: "json",
});
diff --git a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
index 0edc62c6b..e16a15f3d 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
@@ -44,7 +44,7 @@ const maybeSRC = lift(({ src, pending, partial }) => {
Error generating content
`;
- if (partial) return ''+ partial.replace(/' + partial.replace(/ {
+const buildUiMessages = lift(({ prompt, lastSrc }) => {
let fullPrompt = prompt;
if (lastSrc) {
fullPrompt += `\n\nHere's the previous HTML for reference:\n\`\`\`html\n${lastSrc}\n\`\`\``;
}
- return fullPrompt;
+ return [fullPrompt, '```html\n']
});
-const buildSuggestionsPrompt = lift(({ src, prompt, schema }) => {
- let fullPrompt = `Given the current prompt: "${prompt}"`;
- fullPrompt += `\n\nGiven the following schema:\n\n${JSON.stringify(schema, null, 2)}\n `;
- if (src) {
- fullPrompt += `\n\nAnd the previous HTML:\n\`\`\`html\n${src}\n\`\`\``;
- }
- fullPrompt += `\n\nSuggest 3 prompts to enhancem, refine or branch off into a new UI. Keep it simple these add or change a single feature. Return the suggestions in a JSON block with the following structure:
+const buildSuggestionsMessages = lift(({ src, prompt, schema }) => {
+ if (!src) return;
+
+ let user = `Given the current prompt: "${prompt}"`;
+ user += `\n\nGiven the following schema:\n\n${JSON.stringify(schema, null, 2)}\n `;
+ user += `\n\nAnd the current HTML:\n\`\`\`html\n${src}\n\`\`\``;
+ user += `\n\nSuggest 3 prompts to enhancem, refine or branch off into a new UI. Keep it simple these add or change a single feature. Return the suggestions in a JSON block with the following structure:
\`\`\`json
{
"suggestions": [
@@ -184,7 +184,8 @@ const buildSuggestionsPrompt = lift(({ src, prompt, schema }) => {
Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.
`;
- return fullPrompt;
+
+ return [user, '```json\n{"suggestions":['];
});
const getSuggestions = lift(({ result }) => result?.suggestions ?? []);
@@ -219,22 +220,20 @@ export const iframe = recipe<{
// });
const { result: suggestionsResult } = generateData<{ suggestions: Suggestion[] }>({
- messages: [buildSuggestionsPrompt({ src, prompt, schema }), '```json\n{"suggestions":['],
+ messages: buildSuggestionsMessages({ src, prompt, schema }),
system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.`,
mode: "json",
});
const suggestions = getSuggestions({ result: suggestionsResult });
- tap({ suggestions });
const { result: htmlResult, pending: htmlPending, partial: partialHtml } = generateData<{ html: string }>({
- messages: [buildUiPrompt({ prompt, lastSrc }), '```html\n'],
+ messages: buildUiMessages({ prompt, lastSrc }),
system: viewSystemPrompt({ schema }),
mode: "html",
});
src = maybeHTML({ result: htmlResult });
let preview = maybeSRC({ src, pending: htmlPending, partial: partialHtml });
- tap({ preview })
let firstSuggestion = getSuggestion({ suggestions, index: 0 });
let secondSuggestion = getSuggestion({ suggestions, index: 1 });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
index 542c12060..11d467030 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
@@ -76,7 +76,7 @@ const makeBooking = handler<
});
const buildQuery = lift(({ location }) => ({
- prompt: `generate 10 places for private home short-term rentals in ${location}`,
+ messages: [`generate 10 places for private home short-term rentals in ${location}`, '```json\n'],
result: [],
schema: {
type: "array",
@@ -306,7 +306,7 @@ const generateNearbyPlaceQuery = lift(({ routine, places }) => {
}));
return {
- prompt: `generate ${initialData.length} ${locationType} with pun names`,
+ messages: [`generate ${initialData.length} ${locationType} with pun names`, '```json\n'],
initialData,
schema: {
type: "array",
diff --git a/typescript/packages/lookslike-high-level/src/recipes/wiki.ts b/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
index 0bdab9ed2..9ad7e586b 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
@@ -36,7 +36,8 @@ export const wiki = recipe<{ title: string; canon: string }>(
const {
result: { text, related }, pending,
} = generateData({
- prompt: str`Here is the pages the user has explored so far:\n\n${canon} . Generate a 2 sentence article in a fictional wiki current page titled, and a list of 5 related pages and 1 page that only partially belongs': ${title} `,
+ messages: [str`Here is the pages the user has explored so far:\n\n${canon} . Generate a 2 sentence article in a fictional wiki current page titled, and a list of 5 related pages and 1 page that only partially belongs': ${title} `,
+ '```json\n'],
schema: {
type: "object",
properties: {
@@ -71,9 +72,9 @@ export const wiki = recipe<{ title: string; canon: string }>(
[UI]: html`
${title}
${ifElse(pending,
- html`generating...
`,
- html`${text}
`,
- )}
+ html`generating...
`,
+ html`${text}
`,
+ )}
${relatedWithClosure.map(({ title, canon }) => html`- ${title}
`)}
diff --git a/typescript/packages/planning-server/src/index.ts b/typescript/packages/planning-server/src/index.ts
index 028882564..c267c20e9 100755
--- a/typescript/packages/planning-server/src/index.ts
+++ b/typescript/packages/planning-server/src/index.ts
@@ -26,13 +26,13 @@ const handler = async (request: Request): Promise => {
const cacheKey = await hashKey(JSON.stringify(payload));
const cachedResult = await loadCacheItem(cacheKey);
if (cachedResult) {
- console.log("Cache hit:", description);
- return new Response(JSON.stringify(cachedResult), {
+ const lastMessage = cachedResult.messages[cachedResult.messages.length - 1];
+ return new Response(JSON.stringify(lastMessage), {
headers: { "Content-Type": "application/json" },
});
}
- console.log("Cache miss:", description);
+ console.log("Generating:", description);
let messages = payload.messages;
@@ -56,12 +56,14 @@ const handler = async (request: Request): Promise => {
if (payload.stream) {
const stream = new ReadableStream({
async start(controller) {
+ // NOTE: the llm doesn't send text we put into its mouth, so we need to
+ // manually send it so that streaming client sees everything assistant 'said'
if (messages[messages.length - 1].role === "assistant") {
- controller.enqueue(new TextEncoder().encode(result + '\n'));
+ controller.enqueue(new TextEncoder().encode(JSON.stringify(result) + '\n'));
}
for await (const delta of textStream) {
result += delta;
- controller.enqueue(new TextEncoder().encode(delta + '\n'));
+ controller.enqueue(new TextEncoder().encode(JSON.stringify(delta) + '\n'));
}
if (messages[messages.length - 1].role === "user") {
@@ -104,7 +106,7 @@ const handler = async (request: Request): Promise => {
await saveCacheItem(cacheKey, params);
- return new Response(JSON.stringify(params), {
+ return new Response(JSON.stringify(params.messages[params.messages.length - 1]), {
headers: { "Content-Type": "application/json" },
});
} catch (error) {
@@ -135,6 +137,7 @@ async function loadCacheItem(key: string): Promise {
try {
await ensureDir(CACHE_DIR);
const cacheData = await Deno.readTextFile(filePath);
+ console.log(`Loading cache item: ${filePath}`);
return JSON.parse(cacheData);
} catch {
return null;
@@ -144,6 +147,7 @@ async function loadCacheItem(key: string): Promise {
async function saveCacheItem(key: string, data: any): Promise {
const hash = await hashKey(key);
const filePath = `${CACHE_DIR}/${hash}.json`;
+ console.log(`Saving cache item: ${filePath}`);
await ensureDir(CACHE_DIR);
await Deno.writeTextFile(filePath, JSON.stringify(data, null, 2));
}
From 4048a7df397ef42926efec58d9f70c8a883ff565 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Fri, 4 Oct 2024 16:27:02 -0400
Subject: [PATCH 03/19] remove mistakes
---
.../packages/common-builder/src/built-in.ts | 22 +------------------
.../src/builtins/generate-data.ts | 8 ++++---
2 files changed, 6 insertions(+), 24 deletions(-)
diff --git a/typescript/packages/common-builder/src/built-in.ts b/typescript/packages/common-builder/src/built-in.ts
index df9cbba17..1aac7974b 100644
--- a/typescript/packages/common-builder/src/built-in.ts
+++ b/typescript/packages/common-builder/src/built-in.ts
@@ -20,6 +20,7 @@ export function generateData(
export function fetchData(
params: Value<{
url: string;
+ mode?: "json" | "text";
options?: RequestInit;
result?: T;
}>
@@ -38,27 +39,6 @@ let fetchDataFactory:
>
| undefined = undefined;
-export function streamData(
- params: Value<{
- url: string;
- options?: RequestInit;
- result?: T;
- }>
-): Value<{ pending: boolean; result: T; error: any }> {
- streamDataFactory ||= createNodeFactory({
- type: "builtin",
- implementation: "streamData",
- });
- return streamDataFactory(params);
-}
-
-let streamDataFactory:
- | NodeFactory<
- { url: string; options?: RequestInit; result?: any },
- { pending: boolean; result: any; error: any }
- >
- | undefined = undefined;
-
export function ifElse(
condition: Value,
ifTrue: Value,
diff --git a/typescript/packages/common-runner/src/builtins/generate-data.ts b/typescript/packages/common-runner/src/builtins/generate-data.ts
index 43d541c11..158fdd056 100644
--- a/typescript/packages/common-runner/src/builtins/generate-data.ts
+++ b/typescript/packages/common-runner/src/builtins/generate-data.ts
@@ -15,14 +15,16 @@ import { makeClient, dataRequest } from "../llm-client.js";
* Returns the complete result as `result` and the incremental result as
* `partial`. `pending` is true while a request is pending.
*
+ * @param messages - list of strings to send to the LLM. - alternating user and assistant messages.
+ * - if you end with an assistant message, the LLM will continue from there.
+ * - if empty, no LLM call will be made, result and partial will be undefined.
* @param result - A cell to store the generated data.
* @param schema - A cell to store the schema of the generated data.
* @param system - A cell overriding the default system prompt. Only `prompt`
* above will be used, as-is, and `result` and `schema` will be ignored.
* @param mode - The mode to use for generating data. Either `json` or `html`
* default to `json` results.
- * @param messages - list of strings to send to the LLM. - alternating user and assistant messages.
- * if you end with an assistant message, the LLM will continue from there.
+ *
* @returns { pending: boolean, result: any, partial: any } - As individual
* cells, representing `pending` state, final `result` and incrementally
* updating `partial` result.
@@ -32,11 +34,11 @@ export function generateData(
{ inputs, outputs }: Node
) {
const inputBindings = mapBindingsToCell(inputs, recipeCell) as {
+ messages?: string[];
result?: any;
schema?: any;
system?: string;
mode?: "json" | "html";
- messages?: string[];
};
const inputsCell = cell(inputBindings);
From 158de31139949e15c95e3ffaa0066107c28e8567 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Sat, 5 Oct 2024 12:23:25 -0400
Subject: [PATCH 04/19] add stop sequence support
---
.../packages/planning-server/src/index.ts | 22 +++++++++++++++----
1 file changed, 18 insertions(+), 4 deletions(-)
diff --git a/typescript/packages/planning-server/src/index.ts b/typescript/packages/planning-server/src/index.ts
index c267c20e9..51f860f02 100755
--- a/typescript/packages/planning-server/src/index.ts
+++ b/typescript/packages/planning-server/src/index.ts
@@ -18,6 +18,7 @@ const handler = async (request: Request): Promise => {
system: string;
model: string;
max_tokens: number;
+ stop?: string;
stream: boolean; // LLM streams regardless, this is if we stream to the client
};
@@ -39,12 +40,14 @@ const handler = async (request: Request): Promise => {
let params = {
model: payload.model,
system: payload.system,
+ maxTokens: payload.max_tokens,
messages,
}
- const { textStream } = await streamText({
+ const llmStream = await streamText({
...params,
- model: anthropic(payload.model)
+ model: anthropic(payload.model),
+ stopSequences: payload.stop ? [payload.stop] : undefined,
});
let result = "";
@@ -61,11 +64,18 @@ const handler = async (request: Request): Promise => {
if (messages[messages.length - 1].role === "assistant") {
controller.enqueue(new TextEncoder().encode(JSON.stringify(result) + '\n'));
}
- for await (const delta of textStream) {
+ for await (const delta of llmStream.textStream) {
result += delta;
controller.enqueue(new TextEncoder().encode(JSON.stringify(delta) + '\n'));
}
+ if ((await llmStream.finishReason) === "stop" && payload.stop) {
+ // NOTE(ja): we might have stopped because of a stop sequence, so add it to the result...
+ // this is a hack that helps the client parse the result
+ result += payload.stop;
+ controller.enqueue(new TextEncoder().encode(JSON.stringify(payload.stop) + '\n'));
+ }
+
if (messages[messages.length - 1].role === "user") {
messages.push({ role: "assistant", content: result });
} else {
@@ -84,7 +94,7 @@ const handler = async (request: Request): Promise => {
});
}
- for await (const delta of textStream) {
+ for await (const delta of llmStream.textStream) {
result += delta;
}
@@ -98,6 +108,10 @@ const handler = async (request: Request): Promise => {
);
}
+ if ((await llmStream.finishReason) === "stop" && payload.stop) {
+ result += payload.stop;
+ }
+
if (messages[messages.length - 1].role === "user") {
messages.push({ role: "assistant", content: result });
} else {
From f94054dbdf92e4c7fedcde584234875aa890ce56 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Sat, 5 Oct 2024 13:14:12 -0400
Subject: [PATCH 05/19] generateData stop at triple backtick
this speeds up generation (and lowers cost)
---
.../packages/common-runner/src/builtins/generate-data.ts | 7 +------
typescript/packages/llm-client/src/index.ts | 2 +-
2 files changed, 2 insertions(+), 7 deletions(-)
diff --git a/typescript/packages/common-runner/src/builtins/generate-data.ts b/typescript/packages/common-runner/src/builtins/generate-data.ts
index 158fdd056..70feee655 100644
--- a/typescript/packages/common-runner/src/builtins/generate-data.ts
+++ b/typescript/packages/common-runner/src/builtins/generate-data.ts
@@ -60,12 +60,6 @@ export function generateData(
const startGeneration: Action = (log: ReactivityLog) => {
const { result, schema, system, mode, messages } = inputsCell.getAsProxy([], log);
const grab = (mode || 'json') === 'json' ? grabJson : grabHtml;
- if (grab === undefined) {
- pending.setAtPath([], false, log);
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
- return;
- }
if (messages === undefined || messages.length === 0) {
pending.setAtPath([], false, log);
@@ -97,6 +91,7 @@ export function generateData(
system: effectiveSystem,
model: "claude-3-5-sonnet-20240620",
max_tokens: 4096,
+ stop: '```'
}, updatePartial)
const thisRun = ++currentRun;
diff --git a/typescript/packages/llm-client/src/index.ts b/typescript/packages/llm-client/src/index.ts
index 3b41262a1..30b0ef0ad 100644
--- a/typescript/packages/llm-client/src/index.ts
+++ b/typescript/packages/llm-client/src/index.ts
@@ -9,9 +9,9 @@ type LLMRequest = {
model: string,
max_tokens: number,
stream?: boolean,
+ stop?: string,
}
-
export class LLMClient {
private serverUrl: string;
From 082dc1503d4c27f636876b595d2cd75355cb1166 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Sun, 6 Oct 2024 17:19:01 -0400
Subject: [PATCH 06/19] generateData -> generateText
generateText is a thin wrapper around llm client at this point
---
.../src/builtins/generate-data.ts | 143 ------------------
.../src/builtins/generate-text.ts | 107 +++++++++++++
.../common-runner/src/builtins/index.ts | 4 +-
.../packages/common-runner/src/llm-client.ts | 4 +-
typescript/packages/llm-client/src/index.ts | 43 ++++--
5 files changed, 145 insertions(+), 156 deletions(-)
delete mode 100644 typescript/packages/common-runner/src/builtins/generate-data.ts
create mode 100644 typescript/packages/common-runner/src/builtins/generate-text.ts
diff --git a/typescript/packages/common-runner/src/builtins/generate-data.ts b/typescript/packages/common-runner/src/builtins/generate-data.ts
deleted file mode 100644
index 70feee655..000000000
--- a/typescript/packages/common-runner/src/builtins/generate-data.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { type Node } from "@commontools/common-builder";
-import { cell, CellImpl, ReactivityLog } from "../cell.js";
-import { sendValueToBinding, findAllAliasedCells } from "../utils.js";
-import { schedule, Action } from "../scheduler.js";
-import { SimpleMessage } from "@commontools/llm-client";
-import { mapBindingsToCell, normalizeToCells } from "../utils.js";
-import { makeClient, dataRequest } from "../llm-client.js";
-
-// TODO: generateData should really be a recipe, not a builtin, and either the
-// underlying llm client call or even just fetch the built-in.
-
-/**
- * Generate data via an LLM.
- *
- * Returns the complete result as `result` and the incremental result as
- * `partial`. `pending` is true while a request is pending.
- *
- * @param messages - list of strings to send to the LLM. - alternating user and assistant messages.
- * - if you end with an assistant message, the LLM will continue from there.
- * - if empty, no LLM call will be made, result and partial will be undefined.
- * @param result - A cell to store the generated data.
- * @param schema - A cell to store the schema of the generated data.
- * @param system - A cell overriding the default system prompt. Only `prompt`
- * above will be used, as-is, and `result` and `schema` will be ignored.
- * @param mode - The mode to use for generating data. Either `json` or `html`
- * default to `json` results.
- *
- * @returns { pending: boolean, result: any, partial: any } - As individual
- * cells, representing `pending` state, final `result` and incrementally
- * updating `partial` result.
- */
-export function generateData(
- recipeCell: CellImpl,
- { inputs, outputs }: Node
-) {
- const inputBindings = mapBindingsToCell(inputs, recipeCell) as {
- messages?: string[];
- result?: any;
- schema?: any;
- system?: string;
- mode?: "json" | "html";
- };
- const inputsCell = cell(inputBindings);
-
- const pending = cell(false);
- const fullResult = cell(undefined);
- const partialResult = cell(undefined);
-
- const resultCell = cell({
- pending,
- result: fullResult,
- partial: partialResult,
- });
-
- const outputBindings = mapBindingsToCell(outputs, recipeCell) as any[];
- sendValueToBinding(recipeCell, outputBindings, resultCell);
-
- let currentRun = 0;
-
- const startGeneration: Action = (log: ReactivityLog) => {
- const { result, schema, system, mode, messages } = inputsCell.getAsProxy([], log);
- const grab = (mode || 'json') === 'json' ? grabJson : grabHtml;
-
- if (messages === undefined || messages.length === 0) {
- pending.setAtPath([], false, log);
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
- ++currentRun;
- return;
- }
-
- pending.setAtPath([], true, log);
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
-
- let fullMessages: SimpleMessage[] = (messages || []).map(
- (message, index) => ({ role: index % 2 === 0 ? "user" : "assistant", content: message })
- );
-
- // FIXME(ja): lack of system prompt => "create system prompt about json":
- let effectiveSystem = system || dataRequest({
- description: "hmm",
- inputData: result,
- jsonSchema: schema,
- })
-
- const updatePartial = (t: string) => partialResult.setAtPath([], t, log);
-
- let resultPromise = makeClient().sendRequest({
- messages: fullMessages,
- system: effectiveSystem,
- model: "claude-3-5-sonnet-20240620",
- max_tokens: 4096,
- stop: '```'
- }, updatePartial)
-
- const thisRun = ++currentRun;
-
- resultPromise
- .then((a: SimpleMessage) => {
- console.log("result", a);
- return a;
- })
- .then((assistant: SimpleMessage) => grab(assistant.content))
- .then((result) => {
- if (thisRun !== currentRun) return;
-
- normalizeToCells(result, undefined, log);
-
- pending.setAtPath([], false, log);
- fullResult.setAtPath([], result, log);
- partialResult.setAtPath([], result, log);
- }).catch((error) => {
- console.error("Error generating data", error);
- pending.setAtPath([], false, log);
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
- });
- };
-
- schedule(startGeneration, {
- reads: findAllAliasedCells(inputBindings, recipeCell),
- writes: findAllAliasedCells(outputBindings, recipeCell),
- });
-}
-
-function grabJson(txt: string) {
- const jsonMatch = txt.match(/```json\n([\s\S]+?)```/);
- if (!jsonMatch) {
- console.log("No JSON found in text:", txt);
- return {};
- }
- return JSON.parse(jsonMatch[1]);
-}
-
-export function grabHtml(txt: string) {
- const html = txt.match(/```html\n([\s\S]+?)```/)?.[1];
- if (!html) {
- console.error("No HTML found in text", txt);
- return "";
- }
- return { html };
-}
diff --git a/typescript/packages/common-runner/src/builtins/generate-text.ts b/typescript/packages/common-runner/src/builtins/generate-text.ts
new file mode 100644
index 000000000..1e1045592
--- /dev/null
+++ b/typescript/packages/common-runner/src/builtins/generate-text.ts
@@ -0,0 +1,107 @@
+import { type Node } from "@commontools/common-builder";
+import { cell, CellImpl, ReactivityLog } from "../cell.js";
+import { sendValueToBinding, findAllAliasedCells } from "../utils.js";
+import { schedule, Action } from "../scheduler.js";
+import { mapBindingsToCell } from "../utils.js";
+import { makeClient, SimpleMessage, SimpleContent } from "../llm-client.js";
+
+// TODO(ja): investigate if generateText should be replaced by
+// fetchData with streaming support
+
+/**
+ * Generate data via an LLM.
+ *
+ * Returns the complete result as `result` and the incremental result as
+ * `partial`. `pending` is true while a request is pending.
+ *
+ * @param prompt - A cell to store the prompt message - if you only have a single message
+ * @param messages - list of messages to send to the LLM. - alternating user and assistant messages.
+ * - if you end with an assistant message, the LLM will continue from there.
+ * - if both prompt and messages are empty, no LLM call will be made,
+ * result and partial will be undefined.
+ * @param system - A cell to store the system message.
+ * @param stop - A cell to store (optional) stop sequence.
+ * @param max_tokens - A cell to store the maximum number of tokens to generate.
+ *
+ * @returns { pending: boolean, result: any, partial: any } - As individual
+ * cells, representing `pending` state, final `result` and incrementally
+ * updating `partial` result.
+ */
+export function generateText(
+ recipeCell: CellImpl,
+ { inputs, outputs }: Node
+) {
+ const inputBindings = mapBindingsToCell(inputs, recipeCell) as {
+ messages?: SimpleContent[] | SimpleMessage[];
+ prompt?: SimpleContent;
+ stop?: string;
+ system?: string;
+ max_tokens?: number;
+ };
+ const inputsCell = cell(inputBindings);
+
+ const pending = cell(false);
+ const fullResult = cell(undefined);
+ const partialResult = cell(undefined);
+
+ const resultCell = cell({
+ pending,
+ result: fullResult,
+ partial: partialResult,
+ });
+
+ const outputBindings = mapBindingsToCell(outputs, recipeCell) as any[];
+ sendValueToBinding(recipeCell, outputBindings, resultCell);
+
+ let currentRun = 0;
+
+ const startGeneration: Action = (log: ReactivityLog) => {
+ const thisRun = ++currentRun;
+
+ const { system, messages, prompt, stop, max_tokens } = inputsCell.getAsProxy([], log);
+
+ fullResult.setAtPath([], undefined, log);
+ partialResult.setAtPath([], undefined, log);
+
+ if (((prompt === undefined || prompt.length === 0) && (messages === undefined || messages.length === 0)) || system === undefined) {
+ pending.setAtPath([], false, log);
+ return;
+ }
+ pending.setAtPath([], true, log);
+
+ const updatePartial = (t: string) => {
+ if (thisRun != currentRun) return;
+ partialResult.setAtPath([], t, log);
+ }
+
+ let resultPromise = makeClient().sendRequest({
+ messages: messages || [prompt as SimpleContent],
+ system,
+ model: "claude-3-5-sonnet-20240620",
+ max_tokens: max_tokens || 4096,
+ stop
+ }, updatePartial)
+
+ resultPromise
+ .then((result) => {
+ if (thisRun !== currentRun) return;
+ // normalizeToCells(result, undefined, log);
+
+ pending.setAtPath([], false, log);
+ fullResult.setAtPath([], result, log);
+ partialResult.setAtPath([], result, log);
+ }).catch((error) => {
+ if (thisRun !== currentRun) return;
+
+ console.error("Error generating data", error);
+ pending.setAtPath([], false, log);
+ fullResult.setAtPath([], undefined, log);
+ partialResult.setAtPath([], undefined, log);
+ });
+ };
+
+ schedule(startGeneration, {
+ reads: findAllAliasedCells(inputBindings, recipeCell),
+ writes: findAllAliasedCells(outputBindings, recipeCell),
+ });
+}
diff --git a/typescript/packages/common-runner/src/builtins/index.ts b/typescript/packages/common-runner/src/builtins/index.ts
index 9294968c1..781f276a7 100644
--- a/typescript/packages/common-runner/src/builtins/index.ts
+++ b/typescript/packages/common-runner/src/builtins/index.ts
@@ -3,7 +3,7 @@ import { type CellImpl } from "../cell.js";
import { map } from "./map.js";
import { fetchData } from "./fetch-data.js";
import { streamData } from "./stream-data.js";
-import { generateData } from "./generate-data.js";
+import { generateText } from "./generate-text.js";
import { ifElse } from "./if-else.js";
export const builtins: {
[key: string]: (recipeCell: CellImpl, node: Node) => void;
@@ -11,6 +11,6 @@ export const builtins: {
map,
fetchData,
streamData,
- generateData,
+ generateText,
ifElse,
};
diff --git a/typescript/packages/common-runner/src/llm-client.ts b/typescript/packages/common-runner/src/llm-client.ts
index 6ca4306eb..4c09733f1 100644
--- a/typescript/packages/common-runner/src/llm-client.ts
+++ b/typescript/packages/common-runner/src/llm-client.ts
@@ -1,10 +1,12 @@
import { LLMClient } from "@commontools/llm-client";
+export { SimpleMessage, SimpleContent } from "@commontools/llm-client";
+
export const suggestSystem = "You are an assistant that helps match user queries to relevant data gems based on their names and types."
export const jsonDataRequest = `Generate dummy data as JSON as per the provided spec. Use the input to imagine what an API response would look like for a request.`
export const LLM_SERVER_URL = window.location.protocol + "//" + window.location.host + "/api/llm";
-export const makeClient = () => new LLMClient(LLM_SERVER_URL);
+export const makeClient = (url?: string) => new LLMClient(url || LLM_SERVER_URL);
export function dataRequest({
description,
diff --git a/typescript/packages/llm-client/src/index.ts b/typescript/packages/llm-client/src/index.ts
index 30b0ef0ad..9d6ecf8bf 100644
--- a/typescript/packages/llm-client/src/index.ts
+++ b/typescript/packages/llm-client/src/index.ts
@@ -1,13 +1,24 @@
export type SimpleMessage = {
- role: "user" | "assistant",
- content: string,
+ role: "user" | "assistant";
+ content: SimpleContent;
}
+export type SimpleContent = string | TypedContent[]
+
+type TypedContent = {
+ type: "text",
+ text: string,
+} | {
+ type: "image",
+ url: string,
+}
+
+
type LLMRequest = {
- messages: SimpleMessage[],
+ messages: SimpleMessage[] | SimpleContent[],
system: string,
model: string,
- max_tokens: number,
+ max_tokens?: number,
stream?: boolean,
stop?: string,
}
@@ -19,11 +30,13 @@ export class LLMClient {
this.serverUrl = serverUrl;
}
- async sendRequest(userRequest: LLMRequest, partialCB?: (text: string) => void): Promise {
+ async sendRequest(userRequest: LLMRequest, partialCB?: (text: string) => void): Promise {
const fullRequest: LLMRequest = {
...userRequest,
stream: partialCB ? true : false,
+ messages: userRequest.messages.map(processMessage),
}
+
const response = await fetch(this.serverUrl, {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -41,14 +54,14 @@ export class LLMClient {
throw new Error("No response body");
}
- // if server responds with json, just return the response
+ // the server might return cached data instead of a stream
if (response.headers.get("content-type") === "application/json") {
- return response.json() as Promise;
+ let data = await response.json() as SimpleMessage;
+ // FIXME(ja): can the LLM ever return anything other than a string?
+ return data.content as string;
}
- let content = await this.stream(response.body, partialCB);
-
- return { content, role: "assistant" };
+ return await this.stream(response.body, partialCB);
}
private async stream(body: ReadableStream, cb?: (partial: string) => void): Promise {
@@ -98,3 +111,13 @@ export class LLMClient {
return text;
}
}
+
+function processMessage(m: SimpleMessage | SimpleContent, idx: number): SimpleMessage {
+ if (typeof m === "string" || Array.isArray(m)) {
+ return {
+ role: idx % 2 === 0 ? "user" : "assistant",
+ content: m,
+ };
+ }
+ return m;
+}
\ No newline at end of file
From 95693b041cf62102ed6f596e00acd30bfbdd630d Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Sun, 6 Oct 2024 17:19:29 -0400
Subject: [PATCH 07/19] demo of generateText with json/text/html
---
.../packages/common-builder/src/built-in.ts | 19 ++-
.../packages/common-builder/src/index.ts | 2 +-
.../src/recipes/generator.ts | 122 ++++++++++++++++++
3 files changed, 132 insertions(+), 11 deletions(-)
create mode 100644 typescript/packages/lookslike-high-level/src/recipes/generator.ts
diff --git a/typescript/packages/common-builder/src/built-in.ts b/typescript/packages/common-builder/src/built-in.ts
index 1aac7974b..e5baf583d 100644
--- a/typescript/packages/common-builder/src/built-in.ts
+++ b/typescript/packages/common-builder/src/built-in.ts
@@ -1,20 +1,19 @@
import { lift, createNodeFactory } from "./module.js";
import { Value, NodeFactory, CellProxy } from "./types.js";
-export function generateData(
+export function generateText(
params: Value<{
messages: string[];
- result?: T;
- schema?: any;
system?: string;
- mode?: "json" | "html";
+ stop?: string;
+ max_tokens?: number;
}>
-): CellProxy<{ pending: boolean; result: T; partial: any; error: any }> {
- generateDataFactory ||= createNodeFactory({
+): CellProxy<{ pending: boolean; result: string; partial: string; error: any }> {
+ generateTextFactory ||= createNodeFactory({
type: "builtin",
- implementation: "generateData",
+ implementation: "generateText",
});
- return generateDataFactory(params);
+ return generateTextFactory(params);
}
export function fetchData(
@@ -53,9 +52,9 @@ export function ifElse(
let ifElseFactory: NodeFactory<[any, any, any], any> | undefined = undefined;
-let generateDataFactory:
+let generateTextFactory:
| NodeFactory<
- { messages: string[]; result?: any; schema?: any; system?: string },
+ { messages: string[]; system?: string; stop?: string; max_tokens?: number },
{ pending: boolean; result: any; partial: any; error: any }
>
| undefined = undefined;
diff --git a/typescript/packages/common-builder/src/index.ts b/typescript/packages/common-builder/src/index.ts
index 2abae7fcd..beddf8d1c 100644
--- a/typescript/packages/common-builder/src/index.ts
+++ b/typescript/packages/common-builder/src/index.ts
@@ -6,7 +6,7 @@ export {
isolated,
} from "./module.js";
export { recipe } from "./recipe.js";
-export { streamData, fetchData, generateData, ifElse, str } from "./built-in.js";
+export { streamData, fetchData, generateText, ifElse, str } from "./built-in.js";
export {
ID,
TYPE,
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
new file mode 100644
index 000000000..a7c5a4991
--- /dev/null
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -0,0 +1,122 @@
+import { html } from "@commontools/common-html";
+import { recipe, NAME, UI, handler, lift, generateText } from "@commontools/common-builder";
+
+
+const updateValue = handler<{ detail: { value: string } }, { value: string }>(
+ ({ detail }, state) => { detail?.value && (state.value = detail.value); }
+);
+
+const generateTextMessages = lift(({ textprompt }) => {
+ return textprompt && [textprompt, 'It was']
+});
+
+const generateJSONMessages = lift(({ jsonprompt }) => {
+ return jsonprompt && [jsonprompt, '```json\n{']
+});
+
+const generateHTMLMessages = lift(({ htmlprompt }) => {
+ return htmlprompt && [htmlprompt, '```html\n']
+});
+
+const grabText = lift(({ result, partial, pending }) => {
+ if (pending) {
+ return partial || ''
+ }
+ return result
+})
+
+const grabJson = lift(({ result }) => {
+ if (!result) {
+ return {};
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.log("No JSON found in text:", result);
+ return {};
+ }
+ return JSON.parse(jsonMatch[1]);
+})
+
+const grabHtml = lift(({ result, partial, pending }) => {
+ console.log({partial, pending})
+ if (pending) {
+ if (!partial) {
+ return ""
+ }
+ console.log(partial);
+ return partial.replace(//g, ">").slice(-1000);
+ }
+
+ if (!result) {
+ return "";
+ }
+
+ const html = result.match(/```html\n([\s\S]+?)```/)?.[1];
+ if (!html) {
+ console.error("No HTML found in text", result);
+ return "";
+ }
+ return html
+});
+
+const jsonify = lift(({ data }) => JSON.stringify(data, null, 2))
+
+export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textprompt: string; data: any }>(
+ "data generator",
+ ({ jsonprompt, htmlprompt, textprompt, data }) => {
+
+ textprompt.setDefault("2 sentence story");
+ const { result: textResult, partial: textPartial, pending: textPending } = generateText({
+ messages: generateTextMessages({ textprompt }),
+ system: "You are a helpful assistant that generates text for testing. Respond in text"
+ });
+ const maybeText = grabText({ result: textResult, partial: textPartial, pending: textPending });
+
+ jsonprompt.setDefault("pet");
+ const { result: jsonResult } = generateText({
+ messages: generateJSONMessages({ jsonprompt }),
+ system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
+ stop: '```'
+ });
+ data = grabJson({ result: jsonResult });
+ const maybeJSON = jsonify({ data });
+
+ htmlprompt.setDefault("simple html about recipes");
+ const { result: htmlResult, partial: htmlPartial, pending: htmlPending } = generateText({
+ messages: generateHTMLMessages({ htmlprompt }),
+ system: "You are a helpful assistant that generates HTML for testing. Respond in HTML",
+ stop: '```'
+ });
+ const maybeHTML = grabHtml({ result: htmlResult, partial: htmlPartial, pending: htmlPending });
+
+ return {
+ [NAME]: 'data generator',
+ [UI]: html`
+ Text
+ ${maybeText}
+
+ JSON
+ ${maybeJSON}
+
+ HTML
+
Date: Sun, 6 Oct 2024 17:24:52 -0400
Subject: [PATCH 08/19] common input file tag
loads files as base64 / text or json
---
.../src/components/common-input-file.ts | 158 ++++++++++++++++++
.../common-ui/src/components/index.ts | 1 +
2 files changed, 159 insertions(+)
create mode 100644 typescript/packages/common-ui/src/components/common-input-file.ts
diff --git a/typescript/packages/common-ui/src/components/common-input-file.ts b/typescript/packages/common-ui/src/components/common-input-file.ts
new file mode 100644
index 000000000..e37acc494
--- /dev/null
+++ b/typescript/packages/common-ui/src/components/common-input-file.ts
@@ -0,0 +1,158 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { baseStyles } from "./style.js";
+import { view } from "../hyperscript/render.js";
+import { eventProps } from "../hyperscript/schema-helpers.js";
+
+export const commonFileInput = view("common-file-input", {
+ ...eventProps(),
+ files: { type: "array" },
+ filesContent: { type: "array" },
+ multiple: { type: "boolean" },
+ accept: { type: "string" },
+ appearance: { type: "string" },
+});
+
+interface FileContent {
+ file: File;
+ content: string | ArrayBuffer | object | null;
+}
+
+export type CommonFileInputDetail = {
+ id: string;
+ files: File[];
+ filesContent: FileContent[];
+};
+
+export class CommonFileInputEvent extends Event {
+ detail: CommonFileInputDetail;
+
+ constructor(detail: CommonFileInputDetail) {
+ super("common-file-input", { bubbles: true, composed: true });
+ this.detail = detail;
+ }
+}
+
+@customElement("common-file-input")
+export class CommonFileInputElement extends LitElement {
+ static override styles = [
+ baseStyles,
+ css`
+ :host {
+ display: block;
+ }
+
+ .file-input-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .file-input {
+ appearance: none;
+ border: 0;
+ outline: 0;
+ box-sizing: border-box;
+ font-size: var(--body-size);
+ width: 100%;
+ padding: 8px;
+ }
+
+ :host([appearance="rounded"]) .file-input {
+ background-color: var(--input-background);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 12px 16px;
+ }
+ `,
+ ];
+
+ @property({ type: Array }) files: File[] = [];
+ @property({ type: Array }) filesContent: FileContent[] = [];
+ @property({ type: Boolean }) multiple = false;
+ @property({ type: String }) accept: string = "";
+ @property({ type: String }) appearance = "default";
+ @property({ type: String }) loadMode: 'base64' | 'json' | 'text' = 'base64';
+
+ /**
+ * Handles the file input change event.
+ * Reads the content of selected files and dispatches an event with file details and contents.
+ */
+ private async handleChange(event: Event) {
+ console.log("handleChange - internal", event);
+ const input = event.target as HTMLInputElement;
+ if (input.files) {
+ this.files = Array.from(input.files);
+ this.filesContent = await this.readFiles(this.files);
+
+ this.dispatchEvent(
+ new CommonFileInputEvent({
+ id: this.id,
+ files: this.files,
+ filesContent: this.filesContent,
+ })
+ );
+ }
+ }
+
+ /**
+ * Reads the content of each selected file.
+ * @param files Array of File objects to be read.
+ * @returns Promise resolving to an array containing each file and its content.
+ */
+ private async readFiles(
+ files: File[]
+ ): Promise {
+ const readFile = (file: File): Promise => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+
+ reader.onload = () => {
+ let content: string | ArrayBuffer | object | null = reader.result;
+ if (this.loadMode === 'json' && typeof reader.result === 'string') {
+ try {
+ content = JSON.parse(reader.result);
+ } catch (error) {
+ console.error(`Error parsing JSON from file: ${file.name}`, error);
+ content = null;
+ }
+ }
+ resolve({ file, content });
+ };
+
+ reader.onerror = () => {
+ console.error(`Error reading file: ${file.name}`);
+ resolve({ file, content: null });
+ };
+
+ switch (this.loadMode) {
+ case 'base64':
+ reader.readAsDataURL(file);
+ break;
+ case 'text':
+ case 'json':
+ reader.readAsText(file);
+ break;
+ default:
+ reader.readAsDataURL(file);
+ }
+ });
+ };
+
+ return Promise.all(files.map(readFile));
+ }
+
+ override render() {
+ return html`
+
+
+
+ `;
+ }
+}
\ No newline at end of file
diff --git a/typescript/packages/common-ui/src/components/index.ts b/typescript/packages/common-ui/src/components/index.ts
index 9fc67b644..b61bc158c 100644
--- a/typescript/packages/common-ui/src/components/index.ts
+++ b/typescript/packages/common-ui/src/components/index.ts
@@ -4,6 +4,7 @@ export * as CommonDict from './common-dict.js';
export * as CommonHstack from './common-hstack.js';
export * as CommonImg from './common-img.js';
export * as CommonInput from './common-input.js';
+export * as CommonInputFile from './common-input-file.js';
export * as CommonMedia from './common-media.js';
export * as CommonNavPanel from './common-navpanel.js';
export * as CommonRecord from './common-record.js';
From 55e82a318fc2676e709634a8a144d0a58893eb8b Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Mon, 7 Oct 2024 09:17:29 -0400
Subject: [PATCH 09/19] chaining lifts for prep/gen/parse
wow, so much nicer
---
.../src/recipes/generator.ts | 61 ++++++++++---------
1 file changed, 33 insertions(+), 28 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
index a7c5a4991..c7b87b57d 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/generator.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -6,16 +6,36 @@ const updateValue = handler<{ detail: { value: string } }, { value: string }>(
({ detail }, state) => { detail?.value && (state.value = detail.value); }
);
-const generateTextMessages = lift(({ textprompt }) => {
- return textprompt && [textprompt, 'It was']
+const prepText = lift(({ prompt }) => {
+ if (prompt) {
+ return {
+ messages: [prompt, 'It was'],
+ system: "You are a helpful assistant that generates text for testing. Respond in text"
+ }
+ }
+ return {};
});
-const generateJSONMessages = lift(({ jsonprompt }) => {
- return jsonprompt && [jsonprompt, '```json\n{']
+const prepJSON = lift(({ prompt }) => {
+ if (prompt) {
+ return {
+ messages: [prompt, '```json\n{'],
+ system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
+ stop: '```'
+ }
+ }
+ return {};
});
-const generateHTMLMessages = lift(({ htmlprompt }) => {
- return htmlprompt && [htmlprompt, '```html\n']
+const prepHTML = lift(({ prompt }) => {
+ if (prompt) {
+ return {
+ messages: [prompt, '```html\n'],
+ system: "You are a helpful assistant that generates HTML for testing. Respond in HTML",
+ stop: '```'
+ }
+ }
+ return {};
});
const grabText = lift(({ result, partial, pending }) => {
@@ -23,24 +43,23 @@ const grabText = lift(({ result, partial, pending }) => {
return partial || ''
}
return result
-})
+})
const grabJson = lift(({ result }) => {
if (!result) {
- return {};
+ return;
}
const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
if (!jsonMatch) {
console.log("No JSON found in text:", result);
- return {};
+ return;
}
return JSON.parse(jsonMatch[1]);
})
const grabHtml = lift(({ result, partial, pending }) => {
- console.log({partial, pending})
if (pending) {
- if (!partial) {
+ if (!partial) {
return ""
}
console.log(partial);
@@ -66,28 +85,14 @@ export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textpr
({ jsonprompt, htmlprompt, textprompt, data }) => {
textprompt.setDefault("2 sentence story");
- const { result: textResult, partial: textPartial, pending: textPending } = generateText({
- messages: generateTextMessages({ textprompt }),
- system: "You are a helpful assistant that generates text for testing. Respond in text"
- });
- const maybeText = grabText({ result: textResult, partial: textPartial, pending: textPending });
+ const maybeText = grabText(generateText(prepText({ prompt: textprompt })))
jsonprompt.setDefault("pet");
- const { result: jsonResult } = generateText({
- messages: generateJSONMessages({ jsonprompt }),
- system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
- stop: '```'
- });
- data = grabJson({ result: jsonResult });
+ data = grabJson(generateText(prepJSON({ prompt: jsonprompt })));
const maybeJSON = jsonify({ data });
htmlprompt.setDefault("simple html about recipes");
- const { result: htmlResult, partial: htmlPartial, pending: htmlPending } = generateText({
- messages: generateHTMLMessages({ htmlprompt }),
- system: "You are a helpful assistant that generates HTML for testing. Respond in HTML",
- stop: '```'
- });
- const maybeHTML = grabHtml({ result: htmlResult, partial: htmlPartial, pending: htmlPending });
+ const maybeHTML = grabHtml(generateText(prepHTML({ prompt: htmlprompt })));
return {
[NAME]: 'data generator',
From 3983104bb35c19f044db623b37ab13c496139ef9 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Mon, 7 Oct 2024 09:21:46 -0400
Subject: [PATCH 10/19] move the samples nearer to each other
---
.../src/recipes/generator.ts | 60 +++++++++----------
1 file changed, 29 insertions(+), 31 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
index c7b87b57d..897131e0d 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/generator.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -6,6 +6,7 @@ const updateValue = handler<{ detail: { value: string } }, { value: string }>(
({ detail }, state) => { detail?.value && (state.value = detail.value); }
);
+
const prepText = lift(({ prompt }) => {
if (prompt) {
return {
@@ -15,17 +16,13 @@ const prepText = lift(({ prompt }) => {
}
return {};
});
-
-const prepJSON = lift(({ prompt }) => {
- if (prompt) {
- return {
- messages: [prompt, '```json\n{'],
- system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
- stop: '```'
- }
+const grabText = lift(({ result, partial, pending }) => {
+ if (pending) {
+ return partial || ''
}
- return {};
-});
+ return result
+})
+
const prepHTML = lift(({ prompt }) => {
if (prompt) {
@@ -37,32 +34,11 @@ const prepHTML = lift(({ prompt }) => {
}
return {};
});
-
-const grabText = lift(({ result, partial, pending }) => {
- if (pending) {
- return partial || ''
- }
- return result
-})
-
-const grabJson = lift(({ result }) => {
- if (!result) {
- return;
- }
- const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
- if (!jsonMatch) {
- console.log("No JSON found in text:", result);
- return;
- }
- return JSON.parse(jsonMatch[1]);
-})
-
const grabHtml = lift(({ result, partial, pending }) => {
if (pending) {
if (!partial) {
return ""
}
- console.log(partial);
return partial.replace(//g, ">").slice(-1000);
}
@@ -78,6 +54,28 @@ const grabHtml = lift(({ result, partial, pending }) => {
return html
});
+
+const prepJSON = lift(({ prompt }) => {
+ if (prompt) {
+ return {
+ messages: [prompt, '```json\n{'],
+ system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
+ stop: '```'
+ }
+ }
+ return {};
+});
+const grabJson = lift(({ result }) => {
+ if (!result) {
+ return;
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.log("No JSON found in text:", result);
+ return;
+ }
+ return JSON.parse(jsonMatch[1]);
+})
const jsonify = lift(({ data }) => JSON.stringify(data, null, 2))
export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textprompt: string; data: any }>(
From d638a209edbf7b9bfded24a2827f7370ec7304e0 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Mon, 7 Oct 2024 10:04:17 -0400
Subject: [PATCH 11/19] example recipe using zod for json generation
---
typescript/package-lock.json | 20 ++++++++++++-
.../lookslike-high-level/package.json | 6 ++--
.../src/recipes/generator.ts | 30 +++++++++++++++----
3 files changed, 47 insertions(+), 9 deletions(-)
diff --git a/typescript/package-lock.json b/typescript/package-lock.json
index 776caad3d..a2db56764 100644
--- a/typescript/package-lock.json
+++ b/typescript/package-lock.json
@@ -12058,7 +12058,9 @@
"@commontools/common-runner": "^0.0.1",
"@commontools/common-ui": "^0.0.1",
"@commontools/llm-client": "^0.0.1",
- "@commontools/lookslike-sagas": "^0.0.1"
+ "@commontools/lookslike-sagas": "^0.0.1",
+ "zod": "^3.23.8",
+ "zod-to-json-schema": "^3.23.3"
},
"devDependencies": {
"jsdom": "^25.0.0",
@@ -12068,6 +12070,22 @@
"wireit": "^0.14.4"
}
},
+ "packages/lookslike-high-level/node_modules/zod": {
+ "version": "3.23.8",
+ "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+ "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+ "funding": {
+ "url": "https://github.com/sponsors/colinhacks"
+ }
+ },
+ "packages/lookslike-high-level/node_modules/zod-to-json-schema": {
+ "version": "3.23.3",
+ "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.23.3.tgz",
+ "integrity": "sha512-TYWChTxKQbRJp5ST22o/Irt9KC5nj7CdBKYB/AosCRdj/wxEMvv4NNaj9XVUHDOIp53ZxArGhnw5HMZziPFjog==",
+ "peerDependencies": {
+ "zod": "^3.23.3"
+ }
+ },
"packages/lookslike-prototype": {
"name": "@commontools/lookslike-prototype",
"version": "0.0.1",
diff --git a/typescript/packages/lookslike-high-level/package.json b/typescript/packages/lookslike-high-level/package.json
index 695dc198f..d69c28f7b 100644
--- a/typescript/packages/lookslike-high-level/package.json
+++ b/typescript/packages/lookslike-high-level/package.json
@@ -45,12 +45,14 @@
},
"dependencies": {
"@commontools/common-builder": "^0.0.1",
- "@commontools/common-runner": "^0.0.1",
"@commontools/common-frp": "^0.0.1",
"@commontools/common-html": "^0.0.1",
+ "@commontools/common-runner": "^0.0.1",
"@commontools/common-ui": "^0.0.1",
"@commontools/llm-client": "^0.0.1",
- "@commontools/lookslike-sagas": "^0.0.1"
+ "@commontools/lookslike-sagas": "^0.0.1",
+ "zod": "^3.23.8",
+ "zod-to-json-schema": "^3.23.3"
},
"overrides": {
"tough-cookie": "^5.0.0-rc.4"
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
index 897131e0d..e448d01b6 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/generator.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -1,6 +1,7 @@
import { html } from "@commontools/common-html";
import { recipe, NAME, UI, handler, lift, generateText } from "@commontools/common-builder";
-
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
const updateValue = handler<{ detail: { value: string } }, { value: string }>(
({ detail }, state) => { detail?.value && (state.value = detail.value); }
@@ -55,30 +56,47 @@ const grabHtml = lift(({ result, partial, pending }) => {
});
+const Character = z.object({
+ name: z.string(),
+ class: z
+ .string()
+ .describe('Character class, e.g. warrior, mage, or thief.'),
+ description: z.string(),
+});
+type Character = z.infer;
+
const prepJSON = lift(({ prompt }) => {
+ const jsonSchema = JSON.stringify(zodToJsonSchema(Character), null, 2);
+
if (prompt) {
return {
messages: [prompt, '```json\n{'],
- system: "You are a helpful assistant that generates JSON objects for testing. Respond in JSON",
+ system: `Generate character data inspired by the user description using JSON:\n\n${jsonSchema} `,
stop: '```'
}
}
return {};
});
-const grabJson = lift(({ result }) => {
+const grabJson = lift<{ result: string }, Character | undefined>(({ result }) => {
if (!result) {
return;
}
const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
if (!jsonMatch) {
- console.log("No JSON found in text:", result);
+ console.error("No JSON found in text:", result);
+ return;
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = Character.safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
return;
}
- return JSON.parse(jsonMatch[1]);
+ return parsedData.data;
})
const jsonify = lift(({ data }) => JSON.stringify(data, null, 2))
-export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textprompt: string; data: any }>(
+export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textprompt: string; data: Character | undefined }>(
"data generator",
({ jsonprompt, htmlprompt, textprompt, data }) => {
From f7dd266b44f0f60178a26a100f11a694efa498f6 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Mon, 7 Oct 2024 10:11:10 -0400
Subject: [PATCH 12/19] simplify parsing lifts
---
.../src/recipes/generator.ts | 24 +++++++------------
1 file changed, 8 insertions(+), 16 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
index e448d01b6..87b7e0c81 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/generator.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -17,12 +17,7 @@ const prepText = lift(({ prompt }) => {
}
return {};
});
-const grabText = lift(({ result, partial, pending }) => {
- if (pending) {
- return partial || ''
- }
- return result
-})
+const grabText = lift(({ partial }) => { return partial || '' })
const prepHTML = lift(({ prompt }) => {
@@ -35,21 +30,18 @@ const prepHTML = lift(({ prompt }) => {
}
return {};
});
-const grabHtml = lift(({ result, partial, pending }) => {
- if (pending) {
- if (!partial) {
- return ""
- }
- return partial.replace(//g, ">").slice(-1000);
+const grabHtml = lift(({ partial, pending }) => {
+ if (!partial) {
+ return ""
}
- if (!result) {
- return "";
+ if (pending) {
+ return `${partial.slice(-1000).replace(//g, ">").slice(-1000)}`;
}
- const html = result.match(/```html\n([\s\S]+?)```/)?.[1];
+ const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
if (!html) {
- console.error("No HTML found in text", result);
+ console.error("No HTML found in text", partial);
return "";
}
return html
From b53989b38d39d1093de178547078311d303c860e Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Mon, 7 Oct 2024 12:53:10 -0400
Subject: [PATCH 13/19] iframe uses genText
---
.../src/recipes/iframe.ts | 282 ++++++++++--------
1 file changed, 161 insertions(+), 121 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
index e16a15f3d..4289d2b1d 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
@@ -4,20 +4,16 @@ import {
UI,
NAME,
lift,
- generateData,
+ generateText,
handler,
str,
cell,
createJsonSchema,
} from "@commontools/common-builder";
+import { z } from "zod";
import { launch } from "../data.js";
-type Suggestion = {
- behaviour: 'append' | 'fork',
- prompt: string,
-}
-
const formatData = lift(({ obj }) => {
console.log("stringify", obj);
return JSON.stringify(obj, null, 2);
@@ -32,85 +28,6 @@ const updateValue = handler<{ detail: { value: string } }, { value: string }>(
({ detail }, state) => detail?.value && (state.value = detail.value),
);
-const maybeHTML = lift(({ result }) => {
- return result?.html || ''
-});
-
-const maybeSRC = lift(({ src, pending, partial }) => {
- if (src) return src;
- if (!pending) return `
-
- ❌
- Error generating content
-
- `;
- if (partial) return '' + partial.replace(/ `generate a complete HTML document within a html block , e.g.
- \`\`\`html
- ...
- \`\`\`
-
- This must be complete HTML.
- Import Tailwind (include \`\`) and style the page using it. Use tasteful, minimal defaults with a consistent style but customize based on the request.
- Import React (include \`
-
-
-
- \`) and write the app using it.
-
- You may not use any other libraries unless requested by the user.
-
- The document can and should make use of postMessage to read and write data from the host context. e.g.
-
- document.addEventListener('DOMContentLoaded', function() {
- console.log('Initialized!');
-
- window.parent.postMessage({
- type: 'subscribe',
- key: 'exampleKey'
- }, '*');
-
- window.addEventListener('message', function(event) {
- if (event.data.type === 'readResponse') {
- // use response
- console.log('readResponse', event.data.key,event.data.value);
- } else if (event.data.type === 'update') {
- // event.data.value is a JSON object already
- // refer to schema for structure
- ...
- });
- });
-
- window.parent.postMessage({
- type: 'write',
- key: 'exampleKey',
- value: 'Example data to write'
- }, '*');
-
- You can subscribe and unsubscribe to changes from the keys:
-
- window.parent.postMessage({
- type: 'subscribe',
- key: 'exampleKey'
- }, '*');
-
- You receive 'update' messages with a 'key' and 'value' field.
-
- window.parent.postMessage({
- type: 'unsubscribe',
- key: 'exampleKey',
- }, '*');
-
-
- ${JSON.stringify(schema, null, 2)}
-
-
- It's best to access and manage each state reference seperately.`,
-);
-
const deriveJsonSchema = lift(({ data, filter }) => {
const schema = createJsonSchema({}, data)?.["properties"];
if (!schema) return {};
@@ -156,44 +73,176 @@ const acceptSuggestion = handler<
}
});
-const buildUiMessages = lift(({ prompt, lastSrc }) => {
- let fullPrompt = prompt;
- if (lastSrc) {
- fullPrompt += `\n\nHere's the previous HTML for reference:\n\`\`\`html\n${lastSrc}\n\`\`\``;
- }
- return [fullPrompt, '```html\n']
+
+const Suggestion = z.object({
+ behaviour: z.enum(['append', 'fork']),
+ prompt: z.string(),
});
+type Suggestion = z.infer;
-const buildSuggestionsMessages = lift(({ src, prompt, schema }) => {
- if (!src) return;
+const prepSuggestions = lift(({ src, prompt, schema }) => {
+ if (!src) {
+ return {};
+ }
let user = `Given the current prompt: "${prompt}"`;
user += `\n\nGiven the following schema:\n\n${JSON.stringify(schema, null, 2)}\n `;
user += `\n\nAnd the current HTML:\n\`\`\`html\n${src}\n\`\`\``;
- user += `\n\nSuggest 3 prompts to enhancem, refine or branch off into a new UI. Keep it simple these add or change a single feature. Return the suggestions in a JSON block with the following structure:
- \`\`\`json
- {
- "suggestions": [
- {
- "behaviour": "append" | "fork",
- "prompt": "string"
- }
- ]
- }
- \`\`\`
+ user += `\n\nSuggest 3 prompts to enhancem, refine or branch off into a new UI. Keep it simple these add or change a single feature.
Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.
`;
- return [user, '```json\n{"suggestions":['];
+ return {
+ messages: [user, '```json\n{"suggestions":['],
+ system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.
+
+\`\`\`json
+{
+ "suggestions": [
+ {
+ "behaviour": "append" | "fork",
+ "prompt": "string"
+ }
+ ]
+}
+\`\`\``,
+ stop: '```'
+ }
});
-const getSuggestions = lift(({ result }) => result?.suggestions ?? []);
+
+const grabSuggestions = lift<{ result: string }, Suggestion[]>(({ result }) => {
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = Suggestion.array().safeParse(rawData['suggestions'] || []);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
+})
const getSuggestion = lift(({ suggestions, index }: { suggestions: Suggestion[], index: number }) => {
return suggestions[index] || { behaviour: '', prompt: '' };
});
+const prepHTML = lift(({ prompt, schema, lastSrc }) => {
+ if (!prompt) {
+ return {};
+ }
+
+ let fullPrompt = prompt;
+ if (lastSrc) {
+ fullPrompt += `\n\nHere's the previous HTML for reference:\n\`\`\`html\n${lastSrc}\n\`\`\``;
+ }
+
+ const base = `
+
+
+
+
+
+`
+
+ return {
+ messages: [fullPrompt, '```html\n' + base],
+ stop: '```',
+ system: `generate a complete HTML document within a html block , e.g.
+ \`\`\`html
+ ...
+ \`\`\`
+
+ This must be complete HTML.
+ Import Tailwind and style the page using it. Use tasteful, minimal defaults with a consistent style but customize based on the request.
+ Import React and write the app using it.
+
+ You may not use any other libraries unless requested by the user (in which case, use a CDN to import them)
+
+ The document can and should make use of postMessage to read and write data from the host context. e.g.
+
+ document.addEventListener('DOMContentLoaded', function() {
+ console.log('Initialized!');
+
+ window.parent.postMessage({
+ type: 'subscribe',
+ key: 'exampleKey'
+ }, '*');
+
+ window.addEventListener('message', function(event) {
+ if (event.data.type === 'readResponse') {
+ // use response
+ console.log('readResponse', event.data.key,event.data.value);
+ } else if (event.data.type === 'update') {
+ // event.data.value is a JSON object already
+ // refer to schema for structure
+ ...
+ });
+ });
+
+ window.parent.postMessage({
+ type: 'write',
+ key: 'exampleKey',
+ value: 'Example data to write'
+ }, '*');
+
+ You can subscribe and unsubscribe to changes from the keys:
+
+ window.parent.postMessage({
+ type: 'subscribe',
+ key: 'exampleKey'
+ }, '*');
+
+ You receive 'update' messages with a 'key' and 'value' field.
+
+ window.parent.postMessage({
+ type: 'unsubscribe',
+ key: 'exampleKey',
+ }, '*');
+
+ <view-model-schema>
+ ${JSON.stringify(schema, null, 2)}
+ </view-model-schema>
+
+ It's best to access and manage each state reference seperately.`
+ }
+});
+
+const grabHTML = lift<{ pending: boolean, partial: string }, string>(({ pending, partial }) => {
+ if (pending || !partial) {
+ return '';
+ }
+ const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
+ if (!html) {
+ console.error("No HTML found in text", partial);
+ return '';
+ }
+ return html
+});
+
+const genHTMLView = lift(({ pending, partial }) => {
+ if (!partial) {
+ return "";
+ }
+ if (pending) {
+ return `<code>${partial.slice(-1000).replace(/</g, "<").replace(/>/g, ">").slice(-1000)}</code>`;
+ }
+ const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
+ if (!html) {
+ console.error("No HTML found in text", partial);
+ return `<h2>error generating html...</h2><pre>${partial.replace(/>/g, ">")}</pre>`;
+ }
+ return html
+});
+
+
export const iframe = recipe<{
title: string;
prompt: string;
@@ -219,21 +268,12 @@ export const iframe = recipe<{
// mode: "json",
// });
- const { result: suggestionsResult } = generateData<{ suggestions: Suggestion[] }>({
- messages: buildSuggestionsMessages({ src, prompt, schema }),
- system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.`,
- mode: "json",
- });
- const suggestions = getSuggestions({ result: suggestionsResult });
-
- const { result: htmlResult, pending: htmlPending, partial: partialHtml } = generateData<{ html: string }>({
- messages: buildUiMessages({ prompt, lastSrc }),
- system: viewSystemPrompt({ schema }),
- mode: "html",
- });
+ const suggestions = grabSuggestions(generateText(prepSuggestions({ src, prompt, schema })));
- src = maybeHTML({ result: htmlResult });
- let preview = maybeSRC({ src, pending: htmlPending, partial: partialHtml });
+ // this html is a bit of a mess as changing src triggers suggestions and view (showing streaming)
+ const { pending: pendingHTML, partial: partialHTML } = generateText(prepHTML({ prompt, schema, lastSrc }));
+ src = grabHTML({ pending: pendingHTML, partial: partialHTML });
+ const viewsrc = genHTMLView({ pending: pendingHTML, partial: partialHTML });
let firstSuggestion = getSuggestion({ suggestions, index: 0 });
let secondSuggestion = getSuggestion({ suggestions, index: 1 });
@@ -247,7 +287,7 @@ export const iframe = recipe<{
placeholder="title"
oncommon-input=${updateValue({ value: title })}
></common-input>
- <common-iframe src=${preview} $context=${data}></common-iframe>
+ <common-iframe src=${viewsrc} $context=${data}></common-iframe>
<details>
<summary>View Data</summary>
<common-input
From ac18bb60e9814393dadb8bc7a5d683ae02abd63e Mon Sep 17 00:00:00 2001
From: Jesse Andrews <anotherjesse@gmail.com>
Date: Mon, 7 Oct 2024 17:40:25 -0400
Subject: [PATCH 14/19] prompt uses genText
---
.../src/recipes/prompts.ts | 75 ++++++++++++-------
1 file changed, 46 insertions(+), 29 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
index 43571d652..a8a182275 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
@@ -2,13 +2,20 @@ import { html } from "@commontools/common-html";
import {
recipe,
lift,
- generateData,
+ generateText,
handler,
NAME,
UI,
- str,
} from "@commontools/common-builder";
import { launch } from '../data.js';
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
+
+const Prompt = z.object({
+ prompt: z.string().describe('Image generation prompt'),
+});
+type Prompt = z.infer<typeof Prompt>;
+const jsonSchema = JSON.stringify(zodToJsonSchema(Prompt), null, 2);
const imageUrl = lift(
({ title }) => `https://ct-img.m4ke.workers.dev/?prompt=${encodeURIComponent(title)}`
@@ -22,41 +29,51 @@ const updateTitle = handler<{ detail: { value: string } }, { title: string }>(
({ detail }, state) => { (state.title = detail?.value ?? "untitled") }
);
-const maybeList = lift(({ result }) => result || []);
+const grabPrompts = lift<{ result: string }, Prompt[]>(({ result }) => {
+ console.log("grabPrompts", result);
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = z.array(Prompt).safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
+});
+
+const buildPrompt = lift<{ title: string }, { messages: string[], system: string, stop: string } | {}>(({ title }) => {
+ if (!title) return;
-// FIXME(ja): if type Prompt is just a string, the render map fails
-type Prompt = {
- prompt: string;
-}
+ return {
+ system: `Generate 10 image prompt variations when a user sends you a prompt.
+Some should change just the style, some should change the content,
+and some should change both. The last should be a completely different prompt.
+
+<schema>${jsonSchema}</schema>`,
+ messages: [`Generate image prompt variations for: ${title}`, '```json\n['],
+ stop: '```'
+ }
+});
const addToPrompt = handler<
- { prompt: string },
- { title: string }
+ { prompt: string },
+ { title: string }
>((e, state) => {
- state.title += " " + e.prompt;
+ state.title += " " + e.prompt;
});
export const prompt = recipe<{ title: string }>("prompt", ({ title }) => {
title.setDefault("abstract geometric art");
- const { result } = generateData<Prompt[]>({
- prompt: str`generate 10 image prompt variations for the current prompt: ${title}. Some should change just the style, some should change the content, and some should change both. The last should be a completely different prompt.`,
- result: [],
- schema: {
- type: "array",
- items: {
- type: "object",
- properties: {
- prompt: {
- type: "string",
- },
- },
- },
- },
- mode: "json",
- });
+ const variations = grabPrompts(generateText(buildPrompt({ title })));
let src = imageUrl({ title });
- let variations = maybeList({result});
return {
[NAME]: title,
@@ -67,10 +84,10 @@ export const prompt = recipe<{ title: string }>("prompt", ({ title }) => {
oncommon-input=${updateTitle({ title })}
></common-input>
<img src=${src}} width="100%" />
- <ul>${variations.map(({ prompt }) => html`<li>${prompt} - <span onclick=${launcher({ title: prompt })}>⏩</span></li>`)}</ul>
+ <ul>${variations.map(({ prompt }) => html`<li onclick=${launcher({ title: prompt })}>${prompt}</li>`)}</ul>
</common-vstack>`,
title,
- variations: result,
+ variations,
addToPrompt: addToPrompt({ title }),
};
});
From 902c2527d1906431b89dc6cca99714c4fd4ccb8c Mon Sep 17 00:00:00 2001
From: Jesse Andrews <anotherjesse@gmail.com>
Date: Mon, 7 Oct 2024 17:41:15 -0400
Subject: [PATCH 15/19] iframe uses generateText
---
.../src/recipes/iframe.ts | 53 +++++++++----------
1 file changed, 26 insertions(+), 27 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
index 4289d2b1d..c550fb1b1 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
@@ -4,6 +4,7 @@ import {
UI,
NAME,
lift,
+ ifElse,
generateText,
handler,
str,
@@ -85,16 +86,23 @@ const prepSuggestions = lift(({ src, prompt, schema }) => {
return {};
}
- let user = `Given the current prompt: "${prompt}"`;
- user += `\n\nGiven the following schema:\n<view-model-schema>\n${JSON.stringify(schema, null, 2)}\n</view-model-schema>`;
- user += `\n\nAnd the current HTML:\n\`\`\`html\n${src}\n\`\`\``;
- user += `\n\nSuggest 3 prompts to enhancem, refine or branch off into a new UI. Keep it simple these add or change a single feature.
+ let instructions = `Given the current prompt: "${prompt}"
- Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.
- `;
+Given the following schema:
+<view-model-schema>
+${JSON.stringify(schema, null, 2)}
+</view-model-schema>
+
+And the current HTML:
+
+${src}
+
+Suggest 3 prompts to enhance, refine or branch off into a new UI. Keep it simple these add or change a single feature.
+
+Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.`;
return {
- messages: [user, '```json\n{"suggestions":['],
+ messages: [instructions, '```json\n{"suggestions":['],
system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.
\`\`\`json
@@ -215,31 +223,23 @@ const prepHTML = lift(({ prompt, schema, lastSrc }) => {
}
});
-const grabHTML = lift<{ pending: boolean, partial: string }, string>(({ pending, partial }) => {
- if (pending || !partial) {
+const grabHTML = lift<{ result: string }, string | undefined>(({ result }) => {
+ if (!result) {
return '';
}
- const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
+ const html = result.match(/```html\n([\s\S]+?)```/)?.[1];
if (!html) {
- console.error("No HTML found in text", partial);
+ console.error("No HTML found in text", result);
return '';
}
return html
});
-const genHTMLView = lift(({ pending, partial }) => {
- if (!partial) {
+const previewHTML = lift(({ pending, partial }) => {
+ if (!partial || !pending) {
return "";
}
- if (pending) {
- return `<code>${partial.slice(-1000).replace(/</g, "<").replace(/>/g, ">").slice(-1000)}</code>`;
- }
- const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
- if (!html) {
- console.error("No HTML found in text", partial);
- return `<h2>error generating html...</h2><pre>${partial.replace(/>/g, ">")}</pre>`;
- }
- return html
+ return partial.slice(-200);
});
@@ -270,10 +270,8 @@ export const iframe = recipe<{
const suggestions = grabSuggestions(generateText(prepSuggestions({ src, prompt, schema })));
- // this html is a bit of a mess as changing src triggers suggestions and view (showing streaming)
- const { pending: pendingHTML, partial: partialHTML } = generateText(prepHTML({ prompt, schema, lastSrc }));
- src = grabHTML({ pending: pendingHTML, partial: partialHTML });
- const viewsrc = genHTMLView({ pending: pendingHTML, partial: partialHTML });
+ // FIXME(ja): this html is a bit of a mess as changing src triggers suggestions and view (showing streaming)
+ const { result, pending: pendingHTML, partial: partialHTML } = generateText(prepHTML({ prompt, schema, lastSrc }));
let firstSuggestion = getSuggestion({ suggestions, index: 0 });
let secondSuggestion = getSuggestion({ suggestions, index: 1 });
@@ -287,7 +285,8 @@ export const iframe = recipe<{
placeholder="title"
oncommon-input=${updateValue({ value: title })}
></common-input>
- <common-iframe src=${viewsrc} $context=${data}></common-iframe>
+ <common-iframe src=${grabHTML({ result })} $context=${data}></common-iframe>
+ <pre>${previewHTML({ partial: partialHTML, pending: pendingHTML })}
<details>
<summary>View Data</summary>
<common-input
From a0a3305a77c1477875ec8eb0288ba18aa927dc46 Mon Sep 17 00:00:00 2001
From: Jesse Andrews <anotherjesse@gmail.com>
Date: Mon, 7 Oct 2024 18:38:45 -0400
Subject: [PATCH 16/19] luftbnb almost working again
---
.../src/recipes/luft-bnb-search.ts | 226 ++++++++----------
1 file changed, 101 insertions(+), 125 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
index 11d467030..65813eb2e 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
@@ -4,27 +4,52 @@ import {
lift,
handler,
str,
- generateData,
+ generateText,
UI,
NAME,
} from "@commontools/common-builder";
import { addSuggestion, description } from "../suggestions.js";
import { launch, ID } from "../data.js";
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
-export interface LuftBnBPlace {
- // Schema for a place
- id: string;
- title: string;
- host: string;
- location: string;
- propertyType: "Apartment" | "House" | "Room";
- pricePerNight: number;
- numberOfGuests: number;
- latitude: number;
- longitude: number;
- rating: number;
- annotationUI: any;
-}
+const LuftBnBPlace = z.object({
+ id: z.string().describe('Unique identifier for the listing'),
+ title: z.string().describe('Title of the listing'),
+ host: z.string().describe('Host of the listing'),
+ location: z.string().describe('Street corner, Neighborhood and city of the listing'),
+ propertyType: z.enum(['Apartment', 'House', 'Room']),
+ pricePerNight: z.number().min(0),
+ numberOfGuests: z.number().int().min(1),
+ latitude: z.number(),
+ longitude: z.number(),
+ rating: z.number().min(0).max(5).describe('Average rating of the listing'),
+ annotationUI: z.string().describe('empty string - do not add anything here'),
+});
+
+type LuftBnBPlace = z.infer<typeof LuftBnBPlace>;
+
+const LuftBnBPlaces = z.array(LuftBnBPlace);
+
+const jsonSchema = JSON.stringify(zodToJsonSchema(LuftBnBPlaces), null, 2);
+
+const grabPlaces = lift<{ result: string }, LuftBnBPlace[]>(({ result }) => {
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = z.array(LuftBnBPlace).safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
+});
const copy = lift(({ value }: { value: string }) => value);
@@ -75,67 +100,9 @@ const makeBooking = handler<
});
});
-const buildQuery = lift(({ location }) => ({
- messages: [`generate 10 places for private home short-term rentals in ${location}`, '```json\n'],
- result: [],
- schema: {
- type: "array",
- items: {
- type: "object",
- properties: {
- id: {
- type: "string",
- description: "Unique identifier for the listing",
- },
- title: {
- type: "string",
- description: "Title of the listing",
- },
- host: {
- type: "string",
- description: "Host of the listing",
- },
- location: {
- type: "string",
- description: "Street corner, Neighborhood and city of the listing",
- },
- propertyType: {
- type: "string",
- enum: ["Apartment", "House", "Room"],
- },
- pricePerNight: {
- type: "number",
- minimum: 0,
- },
- numberOfGuests: {
- type: "integer",
- minimum: 1,
- },
- latitude: {
- type: "number",
- },
- longitude: {
- type: "number",
- },
- rating: {
- type: "number",
- minimum: 0,
- maximum: 5,
- description: "Average rating of the listing",
- },
- },
- required: [
- "id",
- "title",
- "host",
- "location",
- "propertyType",
- "pricePerNight",
- "numberOfGuests",
- "imageUrl",
- ],
- },
- },
+const buildQuery = lift(({ location, startDate, endDate }) => ({
+ messages: [`generate 10 places for private home short-term rentals in ${location} between ${startDate} and ${endDate}`, '```json\n['],
+ system: `Generate a list of places in json format\n\n<schema>${jsonSchema}</schema>`,
}));
export const luftBnBSearch = recipe<{
@@ -158,9 +125,7 @@ export const luftBnBSearch = recipe<{
const endDateUI = copy({ value: endDate });
const locationUI = copy({ value: location });
- const { result: places } = generateData<LuftBnBPlace[]>(
- buildQuery({ location })
- );
+ const places = grabPlaces(generateText(buildQuery({ location, startDate, endDate })));
return {
[UI]: html`
@@ -186,18 +151,18 @@ export const luftBnBSearch = recipe<{
></common-input>
<common-button
onclick=${handleSearchClick({
- startDate,
- endDate,
- location,
- startDateUI,
- endDateUI,
- locationUI,
- })}
+ startDate,
+ endDate,
+ location,
+ startDateUI,
+ endDateUI,
+ locationUI,
+ })}
>Search</common-button
>
<common-vstack gap="md">
${places.map(
- (place) => html`
+ (place) => html`
<common-vstack gap="xs">
<div>${place.title}</div>
<div>
@@ -212,9 +177,8 @@ export const luftBnBSearch = recipe<{
Book for $${place.pricePerNight} per night
</common-button>
${place.annotationUI}
- </common-vstack>
- `
- )}
+ </common-vstack>`
+ )}
</common-vstack>
</common-vstack>
`,
@@ -255,11 +219,9 @@ const computeBookingDatesFromEvent = lift(({ date }) => {
const describeFirstResult = lift(({ places, startDate, endDate }) => {
return places && places.length
- ? `${places[0].propertyType} ${startDate}-${endDate} in ${
- places[0].location
- }. ${"⭐".repeat(Math.round(places[0].rating))} (${places[0].rating}). $${
- places[0].pricePerNight
- } per night`
+ ? `${places[0].propertyType} ${startDate}-${endDate} in ${places[0].location
+ }. ${"⭐".repeat(Math.round(places[0].rating))} (${places[0].rating}). $${places[0].pricePerNight
+ } per night`
: "Searching...";
});
@@ -298,6 +260,19 @@ addSuggestion({
},
});
+
+const NearbyPlace = z.object({
+ id: z.string().describe('Unique identifier for the listing'),
+ name: z.string().describe('Name of the place'),
+ location: z.string().describe(`Street corner, Neighborhood and city`),
+ walkingDistance: z.number().describe('Walking distance in minutes'),
+});
+
+type NearbyPlace = z.infer<typeof NearbyPlace>;
+
+const NearbyPlaces = z.array(NearbyPlace);
+type NearbyPlaces = z.infer<typeof NearbyPlace>;
+
const generateNearbyPlaceQuery = lift(({ routine, places }) => {
const locationType = routine.locations[0] ?? "coffee shop";
@@ -305,35 +280,37 @@ const generateNearbyPlaceQuery = lift(({ routine, places }) => {
location: place.location,
}));
- return {
- messages: [`generate ${initialData.length} ${locationType} with pun names`, '```json\n'],
- initialData,
- schema: {
- type: "array",
- items: {
- type: "object",
- properties: {
- id: {
- type: "string",
- description: "Unique identifier for the listing",
- },
- name: {
- type: "string",
- description: `Name of the ${locationType}`,
- },
- location: {
- type: "string",
- description:
- "Street corner, Neighborhood and city of the ${locationType}",
- },
- walkingDistance: {
- type: "number",
- description: "Walking distance in minutes",
- },
- },
- },
- },
+
+ const jsonSchema = JSON.stringify(zodToJsonSchema(NearbyPlaces), null, 2);
+
+ let r = {
+ messages: [`generate ${initialData.length} ${locationType} with pun names`,
+ '```json\n['],
+ system: `Generate a list of ${locationType} places in json format\n\n<schema>${jsonSchema}</schema>`,
+ stop: '```',
};
+ console.log(JSON.stringify(r, null, 2));
+ return r;
+});
+
+// FIXME(ja): validate that the recommendations work here...
+const grabNearbyPlaces = lift<{ result: string }, NearbyPlaces>(({ result }) => {
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = z.array(NearbyPlace).safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
});
// NOTE: This writes results into `places`
@@ -352,9 +329,8 @@ const nearbyPlacesForRoutine = recipe<{
routine: { locations: string[] };
places: LuftBnBPlace[];
}>("annotate places for routine", ({ routine, places }) => {
- const query = generateNearbyPlaceQuery({ routine, places });
- const { result: nearbyPlaces } = generateData(query);
+ const nearbyPlaces = grabNearbyPlaces(generateText(generateNearbyPlaceQuery({ routine, places })));
annotatePlacesWithNearbyPlaces({ nearbyPlaces, places });
From 43ef2fc6197ddc558af757720494bf22c18f7f96 Mon Sep 17 00:00:00 2001
From: Jesse Andrews <anotherjesse@gmail.com>
Date: Tue, 8 Oct 2024 12:27:17 -0400
Subject: [PATCH 17/19] another pass through all recipes
generateText -> llm
---
.../packages/common-builder/src/built-in.ts | 19 ++--
.../packages/common-builder/src/index.ts | 2 +-
.../common-runner/src/builtins/index.ts | 4 +-
.../src/builtins/{generate-text.ts => llm.ts} | 36 ++++---
.../src/components/common-suggestions.ts | 2 +
.../src/recipes/annotation.ts | 50 +++++++---
.../src/recipes/generator.ts | 19 ++--
.../src/recipes/iframe.ts | 40 ++++----
.../src/recipes/local-search.ts | 95 +++++++++++--------
.../src/recipes/luft-bnb-search.ts | 43 ++++-----
.../src/recipes/playlist.ts | 76 ++++++++-------
.../src/recipes/prompts.ts | 4 +-
.../lookslike-high-level/src/recipes/wiki.ts | 90 +++++++++++-------
13 files changed, 271 insertions(+), 209 deletions(-)
rename typescript/packages/common-runner/src/builtins/{generate-text.ts => llm.ts} (78%)
diff --git a/typescript/packages/common-builder/src/built-in.ts b/typescript/packages/common-builder/src/built-in.ts
index e5baf583d..e2f81964f 100644
--- a/typescript/packages/common-builder/src/built-in.ts
+++ b/typescript/packages/common-builder/src/built-in.ts
@@ -1,19 +1,20 @@
import { lift, createNodeFactory } from "./module.js";
import { Value, NodeFactory, CellProxy } from "./types.js";
-export function generateText(
+export function llm(
params: Value<{
- messages: string[];
+ messages?: string[];
+ prompt?: string;
system?: string;
stop?: string;
max_tokens?: number;
}>
-): CellProxy<{ pending: boolean; result: string; partial: string; error: any }> {
- generateTextFactory ||= createNodeFactory({
+): CellProxy<{ pending: boolean; result?: string; partial?: string; error: any }> {
+ llmFactory ||= createNodeFactory({
type: "builtin",
- implementation: "generateText",
+ implementation: "llm",
});
- return generateTextFactory(params);
+ return llmFactory(params);
}
export function fetchData<T>(
@@ -52,10 +53,10 @@ export function ifElse<T, U, V>(
let ifElseFactory: NodeFactory<[any, any, any], any> | undefined = undefined;
-let generateTextFactory:
+let llmFactory:
| NodeFactory<
- { messages: string[]; system?: string; stop?: string; max_tokens?: number },
- { pending: boolean; result: any; partial: any; error: any }
+ { messages?: string[]; prompt?: string; system?: string; stop?: string; max_tokens?: number },
+ { pending: boolean; result?: string; partial?: string; error: any }
>
| undefined = undefined;
diff --git a/typescript/packages/common-builder/src/index.ts b/typescript/packages/common-builder/src/index.ts
index beddf8d1c..b7ccbf73b 100644
--- a/typescript/packages/common-builder/src/index.ts
+++ b/typescript/packages/common-builder/src/index.ts
@@ -6,7 +6,7 @@ export {
isolated,
} from "./module.js";
export { recipe } from "./recipe.js";
-export { streamData, fetchData, generateText, ifElse, str } from "./built-in.js";
+export { streamData, fetchData, llm, ifElse, str } from "./built-in.js";
export {
ID,
TYPE,
diff --git a/typescript/packages/common-runner/src/builtins/index.ts b/typescript/packages/common-runner/src/builtins/index.ts
index 781f276a7..d102aabf7 100644
--- a/typescript/packages/common-runner/src/builtins/index.ts
+++ b/typescript/packages/common-runner/src/builtins/index.ts
@@ -3,7 +3,7 @@ import { type CellImpl } from "../cell.js";
import { map } from "./map.js";
import { fetchData } from "./fetch-data.js";
import { streamData } from "./stream-data.js";
-import { generateText } from "./generate-text.js";
+import { llm } from "./llm.js";
import { ifElse } from "./if-else.js";
export const builtins: {
[key: string]: (recipeCell: CellImpl<any>, node: Node) => void;
@@ -11,6 +11,6 @@ export const builtins: {
map,
fetchData,
streamData,
- generateText,
+ llm,
ifElse,
};
diff --git a/typescript/packages/common-runner/src/builtins/generate-text.ts b/typescript/packages/common-runner/src/builtins/llm.ts
similarity index 78%
rename from typescript/packages/common-runner/src/builtins/generate-text.ts
rename to typescript/packages/common-runner/src/builtins/llm.ts
index 1e1045592..a5502dcf3 100644
--- a/typescript/packages/common-runner/src/builtins/generate-text.ts
+++ b/typescript/packages/common-runner/src/builtins/llm.ts
@@ -23,11 +23,11 @@ import { makeClient, SimpleMessage, SimpleContent } from "../llm-client.js";
* @param stop - A cell to store (optional) stop sequence.
* @param max_tokens - A cell to store the maximum number of tokens to generate.
*
- * @returns { pending: boolean, result: any, partial: any } - As individual
+ * @returns { pending: boolean, result?: string, partial?: string } - As individual
* cells, representing `pending` state, final `result` and incrementally
* updating `partial` result.
*/
-export function generateText(
+export function llm(
recipeCell: CellImpl<any>,
{ inputs, outputs }: Node
) {
@@ -41,27 +41,23 @@ export function generateText(
const inputsCell = cell(inputBindings);
const pending = cell(false);
- const fullResult = cell<string | undefined>(undefined);
- const partialResult = cell<string | undefined>(undefined);
+ const result = cell<string | undefined>(undefined);
+ const partial = cell<string | undefined>(undefined);
- const resultCell = cell({
- pending,
- result: fullResult,
- partial: partialResult,
- });
+ const outputCell = cell({ pending, result, partial });
const outputBindings = mapBindingsToCell(outputs, recipeCell) as any[];
- sendValueToBinding(recipeCell, outputBindings, resultCell);
+ sendValueToBinding(recipeCell, outputBindings, outputCell);
let currentRun = 0;
const startGeneration: Action = (log: ReactivityLog) => {
const thisRun = ++currentRun;
- const { system, messages, prompt, stop, max_tokens } = inputsCell.getAsProxy([], log);
+ const { system, messages, prompt, stop, max_tokens } = inputsCell.getAsProxy([], log) ?? {};
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
+ result.setAtPath([], undefined, log);
+ partial.setAtPath([], undefined, log);
if (((prompt === undefined || prompt.length === 0) && (messages === undefined || messages.length === 0)) || system === undefined) {
pending.setAtPath([], false, log);
@@ -69,9 +65,9 @@ export function generateText(
}
pending.setAtPath([], true, log);
- const updatePartial = (t: string) => {
+ const updatePartial = (text: string) => {
if (thisRun != currentRun) return;
- partialResult.setAtPath([], t, log);
+ partial.setAtPath([], text, log);
}
let resultPromise = makeClient().sendRequest({
@@ -83,20 +79,20 @@ export function generateText(
}, updatePartial)
resultPromise
- .then((result) => {
+ .then((text) => {
if (thisRun !== currentRun) return;
// normalizeToCells(result, undefined, log);
pending.setAtPath([], false, log);
- fullResult.setAtPath([], result, log);
- partialResult.setAtPath([], result, log);
+ result.setAtPath([], text, log);
+ partial.setAtPath([], text, log);
}).catch((error) => {
if (thisRun !== currentRun) return;
console.error("Error generating data", error);
pending.setAtPath([], false, log);
- fullResult.setAtPath([], undefined, log);
- partialResult.setAtPath([], undefined, log);
+ result.setAtPath([], undefined, log);
+ partial.setAtPath([], undefined, log);
});
};
diff --git a/typescript/packages/common-ui/src/components/common-suggestions.ts b/typescript/packages/common-ui/src/components/common-suggestions.ts
index 88918ac31..6afc4ec55 100644
--- a/typescript/packages/common-ui/src/components/common-suggestions.ts
+++ b/typescript/packages/common-ui/src/components/common-suggestions.ts
@@ -57,6 +57,8 @@ export class CommonSuggestionsElement extends LitElement {
}
};
+ // FIXME(ja): Cannot read properties of undefined (reading 'slice')
+ // broken on main - doesn't seem to be regression of the llm changes
const suggestions = this.suggestions.slice(0, this.limit);
return html`
diff --git a/typescript/packages/lookslike-high-level/src/recipes/annotation.ts b/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
index 789d62102..f649d308e 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/annotation.ts
@@ -9,7 +9,7 @@ import {
NAME,
TYPE,
ifElse,
- generateData,
+ llm,
} from "@commontools/common-builder";
import { type Charm, openCharm } from "../data.js";
import {
@@ -18,9 +18,17 @@ import {
getCellReferenceOrValue,
} from "@commontools/common-runner";
import { suggestions } from "../suggestions.js";
+import { z } from "zod";
const MINIMUM_CONFIDENCE = -1.0;
+const Suggestion = z.object({
+ index: z.number(),
+ confidence: z.number(),
+ reason: z.string(),
+});
+type Suggestion = z.infer<typeof Suggestion>;
+
type CharmInfo = { id: number; name: string; type: string };
// Lifted functions at module scope
@@ -36,11 +44,13 @@ const getCharmInfo = lift(({ charms }) => {
return charmInfo;
});
-const buildMessages = lift(
+const buildQuery = lift(
({ query, charmInfo }) => {
- return [
- `Given the following user query and list of data charms, return the indices of the charms that are most relevant to the query.
+ return {
+ system: "You are an assistant that helps match user queries to relevant data charms based on their names and types.",
+ messages: [
+ `Given the following user query and list of data charms, return the indices of the charms that are most relevant to the query.
Consider both the names and types of the charms when making your selection.
Think broadly, e.g. a stay in a hotel could match a charm called "morning routine", as the user would want to pick a hotel that supports their morning routine.
@@ -61,11 +71,32 @@ Respond with only JSON array of suggestions, e.g.
{ index: 5, chosen: "suzy collab", reason: "could this be related to Susan? she appears in several project related lists", confidence: 0.33 }
]
\`\`\`
-`, '```json\n['];
+`, '```json\n['
+ ],
+ stop: '```',
+ };
});
+const grabJson = lift<{ result?: string }, Suggestion[]>(({ result }) => {
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = z.array(Suggestion).safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
+});
+
const filterMatchingCharms = lift<{
- matchedIndices: { index: number; confidence: number }[];
+ matchedIndices: Suggestion[];
charmInfo: CharmInfo[];
}>(
({ matchedIndices, charmInfo }) =>
@@ -168,12 +199,7 @@ export const annotation = recipe<{
charms: Charm[];
}>("annotation", ({ query, target, data, charms }) => {
const charmInfo = getCharmInfo({ charms });
- const { result: matchedIndices } = generateData<
- { index: number; confidence: number }[]
- >({
- messages: buildMessages({ query, charmInfo }),
- system: "You are an assistant that helps match user queries to relevant data charms based on their names and types.",
- });
+ const matchedIndices = grabJson(llm(buildQuery({ query, charmInfo })));
const matchingCharms = filterMatchingCharms({ matchedIndices, charmInfo });
const suggestion = findSuggestion({ matchingCharms, data });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/generator.ts b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
index 87b7e0c81..613e9ce59 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/generator.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/generator.ts
@@ -1,5 +1,5 @@
import { html } from "@commontools/common-html";
-import { recipe, NAME, UI, handler, lift, generateText } from "@commontools/common-builder";
+import { recipe, NAME, UI, handler, lift, llm } from "@commontools/common-builder";
import { z } from 'zod';
import zodToJsonSchema from 'zod-to-json-schema';
@@ -17,7 +17,7 @@ const prepText = lift(({ prompt }) => {
}
return {};
});
-const grabText = lift(({ partial }) => { return partial || '' })
+const grabText = lift<{ partial?: string }, string>(({ partial }) => { return partial || '' })
const prepHTML = lift(({ prompt }) => {
@@ -30,13 +30,13 @@ const prepHTML = lift(({ prompt }) => {
}
return {};
});
-const grabHtml = lift(({ partial, pending }) => {
+const grabHtml = lift<{ partial?: string; pending?: boolean }, string>(({ partial, pending }) => {
if (!partial) {
return ""
}
if (pending) {
- return `<code>${partial.slice(-1000).replace(/</g, "<").replace(/>/g, ">").slice(-1000)}</code>`;
+ return `<code>${partial.split('\n').slice(-5).join('\n').replace(/</g, "<").replace(/>/g, ">")}</code>`;
}
const html = partial.match(/```html\n([\s\S]+?)```/)?.[1];
@@ -69,7 +69,7 @@ const prepJSON = lift(({ prompt }) => {
}
return {};
});
-const grabJson = lift<{ result: string }, Character | undefined>(({ result }) => {
+const grabJson = lift<{ result?: string }, Character | undefined>(({ result }) => {
if (!result) {
return;
}
@@ -93,14 +93,13 @@ export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textpr
({ jsonprompt, htmlprompt, textprompt, data }) => {
textprompt.setDefault("2 sentence story");
- const maybeText = grabText(generateText(prepText({ prompt: textprompt })))
+ const maybeText = grabText(llm(prepText({ prompt: textprompt })))
jsonprompt.setDefault("pet");
- data = grabJson(generateText(prepJSON({ prompt: jsonprompt })));
- const maybeJSON = jsonify({ data });
+ data = grabJson(llm(prepJSON({ prompt: jsonprompt })));
htmlprompt.setDefault("simple html about recipes");
- const maybeHTML = grabHtml(generateText(prepHTML({ prompt: htmlprompt })));
+ const maybeHTML = grabHtml(llm(prepHTML({ prompt: htmlprompt })));
return {
[NAME]: 'data generator',
@@ -119,7 +118,7 @@ export const generator = recipe<{ jsonprompt: string; htmlprompt: string; textpr
placeholder="Request to LLM"
oncommon-input=${updateValue({ value: jsonprompt })}
></common-input>
- <pre>${maybeJSON}</pre>
+ <pre>${jsonify({ data })}</pre>
<p>HTML</p>
<common-input
diff --git a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
index c550fb1b1..f8789ac27 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/iframe.ts
@@ -4,8 +4,7 @@ import {
UI,
NAME,
lift,
- ifElse,
- generateText,
+ llm,
handler,
str,
cell,
@@ -88,7 +87,15 @@ const prepSuggestions = lift(({ src, prompt, schema }) => {
let instructions = `Given the current prompt: "${prompt}"
-Given the following schema:
+Suggest 3 prompts to enhance, refine or branch off into a new UI. Keep it simple these add or change a single feature.
+
+Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.`;
+
+ return {
+ messages: [instructions, '```json\n{"suggestions":['],
+ system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential.
+
+Using the following schema:
<view-model-schema>
${JSON.stringify(schema, null, 2)}
</view-model-schema>
@@ -97,14 +104,8 @@ And the current HTML:
${src}
-Suggest 3 prompts to enhance, refine or branch off into a new UI. Keep it simple these add or change a single feature.
-
-Do not ever exceed a single sentence. Prefer terse, suggestions that take one step.`;
+Respond in a json block.
- return {
- messages: [instructions, '```json\n{"suggestions":['],
- system: `Suggest extensions to the UI either as modifications or forks off into new interfaces. Avoid bloat, focus on the user experience and creative potential. Respond in a json block.
-
\`\`\`json
{
"suggestions": [
@@ -120,7 +121,7 @@ Do not ever exceed a single sentence. Prefer terse, suggestions that take one st
});
-const grabSuggestions = lift<{ result: string }, Suggestion[]>(({ result }) => {
+const grabSuggestions = lift<{ result?: string }, Suggestion[]>(({ result }) => {
if (!result) {
return [];
}
@@ -223,26 +224,25 @@ const prepHTML = lift(({ prompt, schema, lastSrc }) => {
}
});
-const grabHTML = lift<{ result: string }, string | undefined>(({ result }) => {
+const grabHTML = lift<{ result?: string }, string | undefined>(({ result }) => {
if (!result) {
- return '';
+ return;
}
const html = result.match(/```html\n([\s\S]+?)```/)?.[1];
if (!html) {
console.error("No HTML found in text", result);
- return '';
+ return;
}
return html
});
-const previewHTML = lift(({ pending, partial }) => {
+const tail = lift<{ pending: boolean, partial?: string, lines: number }, string>(({ pending, partial, lines }) => {
if (!partial || !pending) {
return "";
}
- return partial.slice(-200);
+ return partial.split('\n').slice(-lines).join('\n');
});
-
export const iframe = recipe<{
title: string;
prompt: string;
@@ -268,10 +268,10 @@ export const iframe = recipe<{
// mode: "json",
// });
- const suggestions = grabSuggestions(generateText(prepSuggestions({ src, prompt, schema })));
+ const suggestions = grabSuggestions(llm(prepSuggestions({ src, prompt, schema })));
// FIXME(ja): this html is a bit of a mess as changing src triggers suggestions and view (showing streaming)
- const { result, pending: pendingHTML, partial: partialHTML } = generateText(prepHTML({ prompt, schema, lastSrc }));
+ const { result, pending: pendingHTML, partial: partialHTML } = llm(prepHTML({ prompt, schema, lastSrc }));
let firstSuggestion = getSuggestion({ suggestions, index: 0 });
let secondSuggestion = getSuggestion({ suggestions, index: 1 });
@@ -286,7 +286,7 @@ export const iframe = recipe<{
oncommon-input=${updateValue({ value: title })}
></common-input>
<common-iframe src=${grabHTML({ result })} $context=${data}></common-iframe>
- <pre>${previewHTML({ partial: partialHTML, pending: pendingHTML })}
+ <pre>${tail({ partial: partialHTML, pending: pendingHTML, lines: 5 })}
<details>
<summary>View Data</summary>
<common-input
diff --git a/typescript/packages/lookslike-high-level/src/recipes/local-search.ts b/typescript/packages/lookslike-high-level/src/recipes/local-search.ts
index f6d7bcc99..3ff6a141b 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/local-search.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/local-search.ts
@@ -5,29 +5,67 @@ import {
lift,
str,
cell,
- generateData,
+ llm,
UI,
NAME,
ifElse,
} from "@commontools/common-builder";
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
-export interface Place {
- name: string;
- description: string;
- address: string;
- city: string;
- state: string;
- zip: string;
- latitude: number;
- longitude: number;
- rating: number;
-}
+const Place = z.object({
+ name: z.string(),
+ description: z.string(),
+ address: z.string(),
+ city: z.string(),
+ state: z.string(),
+ zip: z.string(),
+ latitude: z.number(),
+ longitude: z.number(),
+ rating: z.number().min(0).max(5),
+});
+
+type Place = z.infer<typeof Place>;
+
+const PlaceList = z.array(Place);
+type PlaceList = z.infer<typeof PlaceList>;
+
+const jsonSchema = JSON.stringify(zodToJsonSchema(PlaceList), null, 2);
+
+const buildPrompt = lift<{ prompt?: string }, { messages: string[], system: string, stop?: string }>(({ prompt }) => {
+ if (!prompt) {
+ return {};
+ }
+ return {
+ messages: [prompt, '```json\n['],
+ system: `Generate place data inspired by the user description using JSON:\n\n<schema>${jsonSchema}</schema>`,
+ stop: '```'
+ }
+});
+
+const grabJson = lift<{ result?: string }, PlaceList | undefined>(({ result }) => {
+ if (!result) {
+ return [];
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return [];
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = PlaceList.safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return [];
+ }
+ return parsedData.data;
+});
const searchPlaces = handler<
{},
- { what: string; where: string; query: { prompt: string } }
->((_, { what, where, query }) => {
- query.prompt = `generate 10 places that match they query: ${what} in ${where}`;
+ { what: string; where: string; prompt: string }
+>((_, state) => {
+ state.prompt = `generate 10 places that match they query: ${state.what} in ${state.where}`;
});
const updateValue = handler<{ detail: { value: string } }, { value: string }>(
@@ -44,29 +82,10 @@ export const localSearch = recipe<{
// TODO: This should be the user's default location, not hardcoded
where.setDefault("San Francisco");
- const query = cell({
- prompt: undefined,
- result: [],
- schema: {
- type: "array",
- items: {
- type: "object",
- properties: {
- name: { type: "string" },
- description: { type: "string" },
- address: { type: "string" },
- city: { type: "string" },
- state: { type: "string" },
- zip: { type: "string" },
- latitude: { type: "number" },
- longitude: { type: "number" },
- rating: { type: "number", minimum: 0, maximum: 5 },
- },
- },
- },
- });
+ const prompt = cell<string | undefined>(undefined);
- const { pending, result: places } = generateData<Place[]>(query);
+ const { result, pending } = llm(buildPrompt({prompt}))
+ const places = grabJson({ result });
return {
[UI]: html`
@@ -89,7 +108,7 @@ export const localSearch = recipe<{
></common-input>
</common-vstack>
</common-hstack>
- <common-button onclick=${searchPlaces({ what, where, query })}
+ <common-button onclick=${searchPlaces({ what, where, prompt })}
>Search</common-button
>
<common-vstack gap="md">
diff --git a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
index 65813eb2e..1af3b3727 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/luft-bnb-search.ts
@@ -3,8 +3,9 @@ import {
recipe,
lift,
handler,
+ ifElse,
str,
- generateText,
+ llm,
UI,
NAME,
} from "@commontools/common-builder";
@@ -16,13 +17,10 @@ import zodToJsonSchema from 'zod-to-json-schema';
const LuftBnBPlace = z.object({
id: z.string().describe('Unique identifier for the listing'),
title: z.string().describe('Title of the listing'),
- host: z.string().describe('Host of the listing'),
location: z.string().describe('Street corner, Neighborhood and city of the listing'),
propertyType: z.enum(['Apartment', 'House', 'Room']),
pricePerNight: z.number().min(0),
numberOfGuests: z.number().int().min(1),
- latitude: z.number(),
- longitude: z.number(),
rating: z.number().min(0).max(5).describe('Average rating of the listing'),
annotationUI: z.string().describe('empty string - do not add anything here'),
});
@@ -33,7 +31,7 @@ const LuftBnBPlaces = z.array(LuftBnBPlace);
const jsonSchema = JSON.stringify(zodToJsonSchema(LuftBnBPlaces), null, 2);
-const grabPlaces = lift<{ result: string }, LuftBnBPlace[]>(({ result }) => {
+const grabPlaces = lift<{ result?: string }, LuftBnBPlace[]>(({ result }) => {
if (!result) {
return [];
}
@@ -79,12 +77,7 @@ const handleSearchClick = handler<
state.location = state.locationUI;
});
-const makeBooking = handler<
- {},
- {
- place: LuftBnBPlace;
- }
->((_, { place }) => {
+const makeBooking = handler<{}, { place: LuftBnBPlace }>((_, { place }) => {
// TODO: This isn't serializable. Instead we have to add a way to trigger a
// recipe from an event.
launch(luftBnBBooking, {
@@ -125,7 +118,8 @@ export const luftBnBSearch = recipe<{
const endDateUI = copy({ value: endDate });
const locationUI = copy({ value: location });
- const places = grabPlaces(generateText(buildQuery({ location, startDate, endDate })));
+ const { result, pending } = llm(buildQuery({ location, startDate, endDate }));
+ const places = grabPlaces({ result });
return {
[UI]: html`
@@ -160,9 +154,11 @@ export const luftBnBSearch = recipe<{
})}
>Search</common-button
>
- <common-vstack gap="md">
- ${places.map(
- (place) => html`
+ ${ifElse(
+ pending,
+ html`<div>Searching...</div>`,
+ places.map(
+ (place) => html`
<common-vstack gap="xs">
<div>${place.title}</div>
<div>
@@ -177,8 +173,8 @@ export const luftBnBSearch = recipe<{
Book for $${place.pricePerNight} per night
</common-button>
${place.annotationUI}
- </common-vstack>`
- )}
+ </common-vstack>`)
+ )}
</common-vstack>
</common-vstack>
`,
@@ -270,9 +266,6 @@ const NearbyPlace = z.object({
type NearbyPlace = z.infer<typeof NearbyPlace>;
-const NearbyPlaces = z.array(NearbyPlace);
-type NearbyPlaces = z.infer<typeof NearbyPlace>;
-
const generateNearbyPlaceQuery = lift(({ routine, places }) => {
const locationType = routine.locations[0] ?? "coffee shop";
@@ -281,20 +274,18 @@ const generateNearbyPlaceQuery = lift(({ routine, places }) => {
}));
- const jsonSchema = JSON.stringify(zodToJsonSchema(NearbyPlaces), null, 2);
+ const jsonSchema = JSON.stringify(zodToJsonSchema(NearbyPlace), null, 2);
- let r = {
+ return {
messages: [`generate ${initialData.length} ${locationType} with pun names`,
'```json\n['],
system: `Generate a list of ${locationType} places in json format\n\n<schema>${jsonSchema}</schema>`,
stop: '```',
};
- console.log(JSON.stringify(r, null, 2));
- return r;
});
// FIXME(ja): validate that the recommendations work here...
-const grabNearbyPlaces = lift<{ result: string }, NearbyPlaces>(({ result }) => {
+const grabNearbyPlaces = lift<{ result?: string }, NearbyPlace[]>(({ result }) => {
if (!result) {
return [];
}
@@ -330,7 +321,7 @@ const nearbyPlacesForRoutine = recipe<{
places: LuftBnBPlace[];
}>("annotate places for routine", ({ routine, places }) => {
- const nearbyPlaces = grabNearbyPlaces(generateText(generateNearbyPlaceQuery({ routine, places })));
+ const nearbyPlaces = grabNearbyPlaces(llm(generateNearbyPlaceQuery({ routine, places })));
annotatePlacesWithNearbyPlaces({ nearbyPlaces, places });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/playlist.ts b/typescript/packages/lookslike-high-level/src/recipes/playlist.ts
index 286eb7828..6b7714022 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/playlist.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/playlist.ts
@@ -3,52 +3,58 @@ import {
recipe,
str,
lift,
- generateData,
+ llm,
ifElse,
UI,
NAME,
} from "@commontools/common-builder";
import { addSuggestion, description } from "../suggestions.js";
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
+
+const Playlist = z.object({
+ title: z.string().describe('Title of the playlist'),
+ songs: z.array(
+ z.object({
+ name: z.string().describe('Song name'),
+ artist: z.string().describe('Artist name'),
+ })
+ ).describe('List of songs in the playlist'),
+});
+type Playlist = z.infer<typeof Playlist>;
+const jsonSchema = JSON.stringify(zodToJsonSchema(Playlist), null, 2);
+
+
+const grabJson = lift<{ result: string }, Playlist | undefined>(({ result }) => {
+ if (!result) {
+ return {};
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return {};
+ }
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = Playlist.safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return;
+ }
+ return parsedData.data;
+})
-interface Playlist {
- title: string;
- songs: { name: string; artist: string }[];
-}
export const playlistForTrip = recipe<{
ticket: { show: string };
booking: any;
}>("playlist for trip", ({ ticket }) => {
- const { result: playlist } = generateData<Playlist>({
- prompt: str`Create a fun playlist in anticipation of a trip to see ${ticket.show}`,
- schema: {
- type: "object",
- properties: {
- title: {
- type: "string",
- title: "Title of the playlist",
- },
- songs: {
- type: "array",
- title: "Songs",
- items: {
- type: "object",
- properties: {
- name: {
- type: "string",
- title: "Song name",
- },
- artist: {
- type: "string",
- title: "Artist",
- },
- },
- },
- description: "10 songs to listen to on the way to the show",
- },
- },
- },
- });
+
+ const playlist = grabJson(llm({
+ messages: [str`Create a fun playlist in anticipation of a trip to see ${ticket.show}`,
+ '```json\n{'],
+ system: `Generate playlist data inspired by the user description using JSON:\n\n<schema>${jsonSchema}</schema>`,
+ stop: '```'
+ }));
return {
[UI]: html`
diff --git a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
index a8a182275..bb537d1c3 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
@@ -2,7 +2,7 @@ import { html } from "@commontools/common-html";
import {
recipe,
lift,
- generateText,
+ llm,
handler,
NAME,
UI,
@@ -71,7 +71,7 @@ const addToPrompt = handler<
export const prompt = recipe<{ title: string }>("prompt", ({ title }) => {
title.setDefault("abstract geometric art");
- const variations = grabPrompts(generateText(buildPrompt({ title })));
+ const variations = grabPrompts(llm(buildPrompt({ title })));
let src = imageUrl({ title });
diff --git a/typescript/packages/lookslike-high-level/src/recipes/wiki.ts b/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
index 9ad7e586b..b31fb8293 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/wiki.ts
@@ -2,7 +2,7 @@ import { html } from "@commontools/common-html";
import {
recipe,
lift,
- generateData,
+ llm,
handler,
NAME,
UI,
@@ -10,11 +10,59 @@ import {
ifElse,
} from "@commontools/common-builder";
import { launch } from "../data.js";
+import { z } from 'zod';
+import zodToJsonSchema from 'zod-to-json-schema';
-type ExploreResult = {
- text: string;
- related: { title: string }[];
-}
+const ExploreResult = z.object({
+ text: z.string().describe("text of the wiki page"),
+ related: z.array(z.object({
+ title: z.string().describe("title"),
+ })),
+});
+type ExploreResult = z.infer<typeof ExploreResult>;
+const jsonSchema = JSON.stringify(zodToJsonSchema(ExploreResult), null, 2);
+
+const prep = lift<{ title?: string, canon?: string }, { messages: string[], system: string, stop: string } | {}>(({ title, canon }) => {
+ if (!title || !canon) {
+ return {};
+ }
+ return {
+ messages: [`Generate a 2 sentence article in a fictional wiki current page titled, and a list of 5 related pages and 1 page that only partially belongs': <title>${title} `,
+ '```json\n'],
+ system: `You are an AI that generates wiki pages. Here is the pages the user has explored so far:
+
+
+${canon}
+
+
+Use the following schema to generate the page:
+
+
+${jsonSchema}
+
+`,
+ stop: '```',
+ }
+})
+
+const grabJSON = lift<{ result?: string }, ExploreResult>(({ result }) => {
+ if (!result) {
+ return { text: "", related: [] };
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return { text: "", related: [] };
+ }
+
+ let rawData = JSON.parse(jsonMatch[1]);
+ let parsedData = ExploreResult.safeParse(rawData);
+ if (!parsedData.success) {
+ console.error("Invalid JSON:", parsedData.error);
+ return { text: "", related: [] };
+ }
+ return parsedData.data;
+});
// this is a bit of a hack to extend the canon with the current page title and text
// and expose it in a way that works inside the `map` of each related title
@@ -33,34 +81,8 @@ export const wiki = recipe<{ title: string; canon: string }>(
title.setDefault("Mystical Creatures");
canon.setDefault("A mythical creature is a creature that is not real. But let's pretend they are real.");
- const {
- result: { text, related }, pending,
- } = generateData({
- messages: [str`Here is the pages the user has explored so far:\n\n${canon} . Generate a 2 sentence article in a fictional wiki current page titled, and a list of 5 related pages and 1 page that only partially belongs': ${title} `,
- '```json\n'],
- schema: {
- type: "object",
- properties: {
- text: {
- type: "string",
- description: "text of the wiki page",
- },
- related: {
- type: "array",
- items: {
- type: "object",
- properties: {
- title: {
- type: "string",
- description: "title",
- },
- },
- required: ["title"],
- },
- },
- },
- },
- });
+ const { result, pending } = llm(prep({ title, canon }));
+ const { text, related } = grabJSON({ result });
text.setDefault("");
related.setDefault([]);
@@ -72,7 +94,7 @@ export const wiki = recipe<{ title: string; canon: string }>(
[UI]: html`
${title}
${ifElse(pending,
- html`generating...
`,
+ html`generating...
`,
html`${text}
`,
)}
From 47162ef2228e366db2901fee7ca5ec91853cfeb8 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Tue, 8 Oct 2024 12:30:30 -0400
Subject: [PATCH 18/19] update dataDesigner
---
.../src/recipes/dataDesigner.ts | 80 ++++++++++++-------
.../src/recipes/prompts.ts | 1 -
2 files changed, 50 insertions(+), 31 deletions(-)
diff --git a/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts b/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
index 7337ca883..8d1954ec8 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/dataDesigner.ts
@@ -4,10 +4,11 @@ import {
UI,
NAME,
lift,
- generateData,
+ llm,
handler,
str,
createJsonSchema,
+ cell,
} from "@commontools/common-builder";
@@ -25,12 +26,37 @@ const updateTitle = handler<{ detail: { value: string } }, { title: string }>(
({ detail }, state) => detail?.value && (state.title = detail.value),
);
-const systemPrompt = `generate/modify a document based on input, respond within a json block , e.g.
- \`\`\`json
- ...
- \`\`\`
+const buildPrompt = lift(({ prompt, data }) => {
+ let fullPrompt = prompt;
+ if (data) {
+ fullPrompt += `\n\nHere's the previous JSON for reference:\n\`\`\`json\n${JSON.stringify(data, null, 2)}\n\`\`\``;
+ }
- No field can be set to null or undefined.`;
+ return {
+ messages: [fullPrompt, '```json\n'],
+ system: `generate/modify a document based on input, respond within a json block , e.g.
+\`\`\`json
+...
+\`\`\`
+
+No field can be set to null or undefined.`,
+ stop: '```'
+ }
+});
+
+const grabJSON = lift<{ result?: string }, any>(({ result }) => {
+ if (!result) {
+ return {};
+ }
+ const jsonMatch = result.match(/```json\n([\s\S]+?)```/);
+ if (!jsonMatch) {
+ console.error("No JSON found in text:", result);
+ return {};
+ }
+ let d = JSON.parse(jsonMatch[1]);
+ console.log("grabJSON", d);
+ return d;
+});
const deriveJsonSchema = lift(({ data }) => {
const schema = createJsonSchema({}, data)?.["properties"];
@@ -49,27 +75,25 @@ const addToPrompt = handler<
{ prompt: string },
{ prompt: string; query: string }
>((e, state) => {
- state.prompt += "\n" + e.prompt;
+ state.prompt = (state.prompt ? state.prompt + "\n" : "") + e.prompt;
state.query = state.prompt;
});
-const buildJSONGenMessages = lift(({ prompt, data }) => {
- console.log("prompt", prompt, data);
- let fullPrompt = prompt;
- if (data) {
- fullPrompt += `\n\nHere's the previous JSON for reference:\n\`\`\`json\n${JSON.stringify(data, null, 2)}\n\`\`\``;
- }
- return [fullPrompt, '```json\n']
-});
-
-const onAcceptData = handler(
+const onAcceptData = handler(
(_, state) => {
- console.log("accept data", state.data, state.result);
state.lastData = JSON.parse(JSON.stringify(state.data));
- state.data = JSON.parse(JSON.stringify(state.result))
+ state.data = JSON.parse(JSON.stringify(state.generatedData))
}
);
+const tail = lift<{ pending: boolean, partial?: string, lines: number }, string>(({ pending, partial, lines }) => {
+ if (!partial || !pending) {
+ return "";
+ }
+ return partial.split('\n').slice(-lines).join('\n');
+});
+
+
export const dataDesigner = recipe<{
title: string;
prompt: string;
@@ -81,16 +105,12 @@ export const dataDesigner = recipe<{
const schema = deriveJsonSchema({ data });
const query = copy({ value: prompt });
- const lastData = copy({ value: data });
- lastData.setDefault({});
+ // using copy for lastData was causing re-running llm whenever data changed in iframes
+ const lastData = cell({ key: 'value' })
tap({ lastData });
- const { result } = generateData({
- messages: buildJSONGenMessages({ prompt, data: lastData }),
- system: systemPrompt,
- mode: "json",
- });
- tap({ result })
+ const {result, pending, partial} = llm(buildPrompt({ prompt, data: lastData }));
+ const generatedData = grabJSON({ result });
return {
[NAME]: str`${title}`,
@@ -109,10 +129,10 @@ export const dataDesigner = recipe<{
onkeyup=${onInput({ value: query })}
style="width: 100%; min-height: 128px;"
>
-
- ${formatData({ obj: result })}
+ ${tail({ partial, pending, lines: 5 })}
+ ${formatData({ obj: generatedData })}
Accept
`,
diff --git a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
index bb537d1c3..25d42fc0c 100644
--- a/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
+++ b/typescript/packages/lookslike-high-level/src/recipes/prompts.ts
@@ -30,7 +30,6 @@ const updateTitle = handler<{ detail: { value: string } }, { title: string }>(
);
const grabPrompts = lift<{ result: string }, Prompt[]>(({ result }) => {
- console.log("grabPrompts", result);
if (!result) {
return [];
}
From c80e3aa5c76bc808c93c81b4eefd77e95a6d2e93 Mon Sep 17 00:00:00 2001
From: Jesse Andrews
Date: Tue, 8 Oct 2024 12:37:27 -0400
Subject: [PATCH 19/19] re-add streamData
accidentally removed during rebasing
---
.../packages/common-builder/src/built-in.ts | 21 +++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/typescript/packages/common-builder/src/built-in.ts b/typescript/packages/common-builder/src/built-in.ts
index e2f81964f..45eca1b72 100644
--- a/typescript/packages/common-builder/src/built-in.ts
+++ b/typescript/packages/common-builder/src/built-in.ts
@@ -39,6 +39,27 @@ let fetchDataFactory:
>
| undefined = undefined;
+export function streamData(
+ params: Value<{
+ url: string;
+ options?: RequestInit;
+ result?: T;
+ }>
+): Value<{ pending: boolean; result: T; error: any }> {
+ streamDataFactory ||= createNodeFactory({
+ type: "builtin",
+ implementation: "streamData",
+ });
+ return streamDataFactory(params);
+}
+
+let streamDataFactory:
+ | NodeFactory<
+ { url: string; options?: RequestInit; result?: any },
+ { pending: boolean; result: any; error: any }
+ >
+ | undefined = undefined;
+
export function ifElse(
condition: Value,
ifTrue: Value,