Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add parent for each item in history

Browse Source
This commit is contained in:
Abi Raja 2023-12-06 22:36:31 -05:00
parent f5ddb779b4
commit 0e8eef4554
4 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/App.tsx
View File

@ -126,7 +126,10 @@ function App() {
setAppState(AppState.CODE_READY); setAppState(AppState.CODE_READY);
}; };
function doGenerateCode(params: CodeGenerationParams) { function doGenerateCode(
params: CodeGenerationParams,
parentVersion?: number
) {
setExecutionConsole([]); setExecutionConsole([]);
setAppState(AppState.CODING); setAppState(AppState.CODING);
@ -143,6 +146,7 @@ function App() {
setAppHistory([ setAppHistory([
{ {
type: "ai_create", type: "ai_create",
parent: null,
code, code,
inputs: { image_url: referenceImages[0] }, inputs: { image_url: referenceImages[0] },
}, },
@ -150,10 +154,20 @@ function App() {
setCurrentVersion(0); setCurrentVersion(0);
} else { } else {
setAppHistory((prev) => { setAppHistory((prev) => {
// Validate parent version
if (!parentVersion) {
toast.error(
"No parent version set. Contact support or open a Github issue."
);
return prev;
}
const newHistory: History = [ const newHistory: History = [
...prev, ...prev,
{ {
type: "ai_edit", type: "ai_edit",
// TODO: It should never be null
parent: parentVersion,
code, code,
inputs: { inputs: {
prompt: updateInstruction, prompt: updateInstruction,
@ -202,18 +216,24 @@ function App() {
if (shouldIncludeResultImage) { if (shouldIncludeResultImage) {
const resultImage = await takeScreenshot(); const resultImage = await takeScreenshot();
doGenerateCode({ doGenerateCode(
{
generationType: "update", generationType: "update",
image: referenceImages[0], image: referenceImages[0],
resultImage: resultImage, resultImage: resultImage,
history: updatedHistory, history: updatedHistory,
}); },
currentVersion
);
} else { } else {
doGenerateCode({ doGenerateCode(
{
generationType: "update", generationType: "update",
image: referenceImages[0], image: referenceImages[0],
history: updatedHistory, history: updatedHistory,
}); },
currentVersion
);
} }
setGeneratedCode(""); setGeneratedCode("");

5
frontend/src/components/history/HistoryDisplay.tsx
View File

@ -52,7 +52,12 @@ export default function HistoryDisplay({
: revertToVersion(index) : revertToVersion(index)
} }
> >
<div className="flex gap-x-1">
<h2 className="text-sm">{displayHistoryItemType(item.type)}</h2> <h2 className="text-sm">{displayHistoryItemType(item.type)}</h2>
{item.parent && item.parent !== index - 1 && (
<h2 className="text-sm">(parent: v{item.parent + 1})</h2>
)}
</div>
<h2 className="text-sm">v{index + 1}</h2> <h2 className="text-sm">v{index + 1}</h2>
</li> </li>
))} ))}

3
frontend/src/components/history/utils.test.ts
View File

@ -4,6 +4,7 @@ import { extractHistoryTree } from "./utils";
const data = [ const data = [
{ {
type: "ai_create" as const, type: "ai_create" as const,
parent: null,
code: "<html>1. create</html>", code: "<html>1. create</html>",
inputs: { inputs: {
image_url: "", image_url: "",
@ -11,6 +12,7 @@ const data = [
}, },
{ {
type: "ai_edit" as const, type: "ai_edit" as const,
parent: 0,
code: "<html>2. edit with better icons</html>", code: "<html>2. edit with better icons</html>",
inputs: { inputs: {
prompt: "use better icons", prompt: "use better icons",
@ -18,6 +20,7 @@ const data = [
}, },
{ {
type: "ai_edit" as const, type: "ai_edit" as const,
parent: 1,
code: "<html>3. edit with better icons and red text</html>", code: "<html>3. edit with better icons and red text</html>",
inputs: { inputs: {
prompt: "make text red", prompt: "make text red",

2
frontend/src/history_types.ts
View File

@ -3,11 +3,13 @@ export type HistoryItemType = "ai_create" | "ai_edit";
export type HistoryItem = export type HistoryItem =
| { | {
type: "ai_create"; type: "ai_create";
parent: null | number;
code: string; code: string;
inputs: AiCreateInputs; inputs: AiCreateInputs;
} }
| { | {
type: "ai_edit"; type: "ai_edit";
parent: null | number;
code: string; code: string;
inputs: AiEditInputs; inputs: AiEditInputs;
}; };