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

44
frontend/src/App.tsx
View File

@ -126,7 +126,10 @@ function App() {
setAppState(AppState.CODE_READY);
};
function doGenerateCode(params: CodeGenerationParams) {
function doGenerateCode(
params: CodeGenerationParams,
parentVersion?: number
) {
setExecutionConsole([]);
setAppState(AppState.CODING);
@ -143,6 +146,7 @@ function App() {
setAppHistory([
{
type: "ai_create",
parent: null,
code,
inputs: { image_url: referenceImages[0] },
},
@ -150,10 +154,20 @@ function App() {
setCurrentVersion(0);
} else {
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 = [
...prev,
{
type: "ai_edit",
// TODO: It should never be null
parent: parentVersion,
code,
inputs: {
prompt: updateInstruction,
@ -202,18 +216,24 @@ function App() {
if (shouldIncludeResultImage) {
const resultImage = await takeScreenshot();
doGenerateCode({
generationType: "update",
image: referenceImages[0],
resultImage: resultImage,
history: updatedHistory,
});
doGenerateCode(
{
generationType: "update",
image: referenceImages[0],
resultImage: resultImage,
history: updatedHistory,
},
currentVersion
);
} else {
doGenerateCode({
generationType: "update",
image: referenceImages[0],
history: updatedHistory,
});
doGenerateCode(
{
generationType: "update",
image: referenceImages[0],
history: updatedHistory,
},
currentVersion
);
}
setGeneratedCode("");

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

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

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

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