Skip to content

Commit

Permalink
Add JSON formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
scosman committed Oct 25, 2024
1 parent 96debda commit cb06512
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 39 deletions.
9 changes: 9 additions & 0 deletions app/web_ui/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions app/web_ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
},
"type": "module",
"dependencies": {
"highlight.js": "^11.10.0",
"openapi-fetch": "^0.12.2",
"posthog-js": "^1.167.1"
}
Expand Down
37 changes: 30 additions & 7 deletions app/web_ui/src/routes/(app)/run/output.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,35 @@
<script lang="ts">
import hljs from "highlight.js/lib/core"
import json from "highlight.js/lib/languages/json"
hljs.registerLanguage("json", json)
export let raw_output: string
export let structured: boolean = false
$: formatted_output = raw_output
? structured
? JSON.stringify(JSON.parse(raw_output), null, 2)
: raw_output
: "No valid output. Content was: " + raw_output
let formatted_json_html: string | null = null
$: {
try {
const json_output = JSON.parse(raw_output)
// Strings are JSON, but not really
if (typeof json_output !== "string") {
formatted_json_html = JSON.stringify(json_output, null, 2)
formatted_json_html = hljs.highlight(formatted_json_html, {
language: "json",
}).value
}
} catch (e) {
formatted_json_html = null
}
}
</script>

<head>
<link rel="stylesheet" href="/styles/highlightjs.min.css" />
</head>

<!-- eslint-disable svelte/no-at-html-tags -->
<pre
class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words">{formatted_output}</pre>
class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words {raw_output.length >
400
? 'text-xs'
: ''}">{#if formatted_json_html}{@html formatted_json_html}{:else}{raw_output}{/if}
</pre>
<!-- eslint-enable svelte/no-at-html-tags -->
22 changes: 4 additions & 18 deletions app/web_ui/src/routes/(app)/run/run.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -267,10 +267,7 @@
Structure Valid
</div>
{/if}
<Output
structured={!!task.output_json_schema}
raw_output={run.output.output}
/>
<Output raw_output={run.output.output} />
<div>
<div class="mt-2">
<button class="text-xs link" on:click={toggle_raw_data}
Expand All @@ -281,12 +278,7 @@
<div class={show_raw_data ? "" : "hidden"}>
<h1 class="text-xl font-bold mt-2 mb-2" id="raw_data">Raw Data</h1>
<div class="text-sm">
<pre
class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words">{JSON.stringify(
run,
null,
2,
)}</pre>
<Output raw_output={JSON.stringify(run, null, 2)} />
</div>
</div>
</div>
Expand Down Expand Up @@ -393,10 +385,7 @@
The model has attempted to fix the output given your instructions.
Review the result.
</p>
<Output
structured={!!task.output_json_schema}
raw_output={repair_run?.output.output || ""}
/>
<Output raw_output={repair_run?.output.output || ""} />
<div>
<div class="mt-2 text-sm text-gray-500">
Based on the repair instructions: &quot;{repair_instructions ||
Expand All @@ -407,10 +396,7 @@
<p class="text-sm text-gray-500 mb-4">
The model has fixed the output given your instructions.
</p>
<Output
structured={!!task.output_json_schema}
raw_output={run?.repaired_output?.output || ""}
/>
<Output raw_output={run?.repaired_output?.output || ""} />
<div>
<div class="mt-2 text-sm text-gray-500">
Based on the repair instructions: &quot;{repair_instructions ||
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import type { Task } from "$lib/types"
import Output from "../../../../(app)/run/output.svelte"
import FormElement from "$lib/utils/form_element.svelte"
import FormList from "$lib/utils/form_list.svelte"
import FormContainer from "$lib/utils/form_container.svelte"
Expand Down Expand Up @@ -343,12 +344,9 @@
<div>
You can't edit a task's input format after creating it. It would
invalidate all past data.
<pre
class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words text-xs mt-2 text-gray-500">Current Schema: {JSON.stringify(
JSON.parse(task.input_json_schema || '"plaintext"'),
null,
2,
)}</pre>
<Output
raw_output={task.input_json_schema || "Input Format: Plain text"}
/>
</div>
{:else}
<SchemaSection
Expand All @@ -372,12 +370,9 @@
<div>
You can't edit a task's output format after creating it. It would
invalidate all past data.
<pre
class="bg-base-200 p-4 rounded-lg whitespace-pre-wrap break-words text-xs mt-2 text-gray-500">Current Schema: {JSON.stringify(
JSON.parse(task.output_json_schema || '"plaintext"'),
null,
2,
)}</pre>
<Output
raw_output={task.output_json_schema || "Output Format: Plain text"}
/>
</div>
{:else}
<SchemaSection
Expand Down
102 changes: 102 additions & 0 deletions app/web_ui/static/styles/highlightjs.min.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/*!
Theme: Grayscale Light
Author: Alexandre Gavioli (https://github.com/Alexx2/)
License: ~ MIT (or more permissive) [via base16-schemes-source]
Maintainer: @highlightjs/core-team
Version: 2021.09.0
*/
pre code.hljs {
display: block;
overflow-x: auto;
padding: 1em;
}
code.hljs {
padding: 3px 5px;
}
.hljs {
color: #464646;
background: #f7f7f7;
}
.hljs ::selection,
.hljs::selection {
background-color: #b9b9b9;
color: #464646;
}
.hljs-comment {
color: #ababab;
}
.hljs-tag {
color: #525252;
}
.hljs-operator,
.hljs-punctuation,
.hljs-subst {
color: #464646;
}
.hljs-operator {
opacity: 0.7;
}
.hljs-bullet,
.hljs-deletion,
.hljs-name,
.hljs-selector-tag,
.hljs-template-variable,
.hljs-variable {
color: #7c7c7c;
}
.hljs-attr,
.hljs-link,
.hljs-literal,
.hljs-number,
.hljs-symbol,
.hljs-variable.constant_ {
color: rgb(1, 86, 146);
}
.hljs-class .hljs-title,
.hljs-title,
.hljs-title.class_ {
color: #a0a0a0;
}
.hljs-strong {
font-weight: 700;
color: #a0a0a0;
}
.hljs-addition,
.hljs-code,
.hljs-string,
.hljs-title.class_.inherited__ {
color: #8e8e8e;
}
.hljs-built_in,
.hljs-doctag,
.hljs-keyword.hljs-atrule,
.hljs-quote,
.hljs-regexp {
color: #868686;
}
.hljs-attribute,
.hljs-function .hljs-title,
.hljs-section,
.hljs-title.function_,
.ruby .hljs-property {
color: #686868;
}
.diff .hljs-meta,
.hljs-keyword,
.hljs-template-tag,
.hljs-type {
color: #747474;
}
.hljs-emphasis {
color: #747474;
font-style: italic;
}
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
color: #5e5e5e;
}
.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
font-weight: 700;
}
2 changes: 1 addition & 1 deletion libs/core/kiln_ai/adapters/langchain_adapters.py
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
from typing import Dict

import kiln_ai.datamodel as datamodel
from kiln_ai.adapters.prompt_builders import SimplePromptBuilder
from langchain_core.language_models.chat_models import BaseChatModel
from langchain_core.messages import HumanMessage, SystemMessage
from langchain_core.messages.base import BaseMessage
Expand Down Expand Up @@ -77,6 +76,7 @@ async def _run(self, input: Dict | str) -> Dict | str:
HumanMessage(content=user_msg),
]
response = self.model.invoke(messages)

if self.has_structured_output():
if (
not isinstance(response, dict)
Expand Down
1 change: 0 additions & 1 deletion libs/studio/kiln_studio/run_api.py
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@ async def run_task(
detail=f"Unknown prompt method: {request.ui_prompt_method}",
)
prompt_builder = prompt_builder_class(task)
print("PROMPT BUILDER", prompt_builder)
adapter = LangChainPromptAdapter(
task,
model_name=request.model_name,
Expand Down

0 comments on commit cb06512

Please sign in to comment.