Skip to content

Commit e86816a

Browse files
zacharyLYHzacharyLYH
committed
added prettier and removed image comparison stuff. locking down main
1 parent f60ac88 commit e86816a

35 files changed

+1820
-1941
lines changed

‎.eslintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"extends": "next/core-web-vitals"
2+
"extends": ["next/core-web-vitals", "prettier"]
33
}

‎.prettierrc.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"trailingComma": "es5",
3+
"semi": true,
4+
"tabWidth": 4,
5+
"singleQuote": false,
6+
"jsxSingleQuote": true,
7+
"plugins": ["prettier-plugin-tailwindcss"]
8+
}

‎README.md

Lines changed: 5 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,7 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
Technical specs: `https://app.eraser.io/workspace/WACLs7K7wFrqNPWPVwBs`
22

3-
## Getting Started
3+
About: `https://app.eraser.io/workspace/3ZJRnTmGHhjrq0lJMnjO1`
44

5-
First, run the development server:
6-
7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
```
14-
15-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16-
17-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18-
19-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20-
21-
## Learn More
22-
23-
To learn more about Next.js, take a look at the following resources:
24-
25-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27-
28-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29-
30-
## Deploy on Vercel
31-
32-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33-
34-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
5+
1. `git clone`/`git pull` this repo.
6+
2. `yarn install`
7+
3. `yarn run start`

‎actions/landing-page-score-v2.ts

Lines changed: 136 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,149 @@
1-
import useSessionStore from "@/data-store/session-store";
2-
import { ConvertPromptStatic } from "@/lib/convert-prompt-static";
3-
import { captureIframe } from "@/lib/static-screenshot";
4-
import toast from "react-hot-toast";
5-
import LandingPageCode from "@/components/landing/test-challenges/placeholder-code";
6-
import { compare } from "image-ssim";
1+
// import useSessionStore from "@/data-store/session-store";
2+
// import { ConvertPromptStatic } from "@/lib/convert-prompt-static";
3+
// import { captureIframe } from "@/lib/static-screenshot";
4+
// import toast from "react-hot-toast";
5+
// import LandingPageCode from "@/components/landing/test-challenges/placeholder-code";
6+
// import { compare } from "image-ssim";
77

8-
export const LandingPageScorerV2 = async () => {
9-
let unsubscribe: Function | null = null;
10-
const sessionStore = useSessionStore.getState();
11-
sessionStore.setLoading(true);
12-
try {
13-
captureIframe(false);
14-
ConvertPromptStatic("/button.png");
15-
let justReset = false;
8+
// export const LandingPageScorerV2 = async () => {
9+
// let unsubscribe: Function | null = null;
10+
// const sessionStore = useSessionStore.getState();
11+
// sessionStore.setLoading(true);
12+
// try {
13+
// captureIframe(false);
14+
// ConvertPromptStatic("/button.png");
15+
// let justReset = false;
1616

17-
interface State {
18-
userImg: string;
19-
imgPrompt: string;
20-
reset: () => void;
21-
setCode: (code: string) => void;
22-
}
17+
// interface State {
18+
// userImg: string;
19+
// imgPrompt: string;
20+
// reset: () => void;
21+
// setCode: (code: string) => void;
22+
// }
2323

24-
type IImage = {
25-
data: Uint8Array;
26-
width: number;
27-
height: number;
28-
channels: number;
29-
};
24+
// type IImage = {
25+
// data: Uint8Array;
26+
// width: number;
27+
// height: number;
28+
// channels: number;
29+
// };
3030

31-
const base64ToImageData = async (
32-
base64Image: string
33-
): Promise<IImage> => {
34-
return new Promise((resolve, reject) => {
35-
const img = new Image();
36-
img.onload = () => {
37-
const canvas = document.createElement("canvas");
38-
canvas.width = img.width;
39-
canvas.height = img.height;
40-
const ctx = canvas.getContext("2d")!;
41-
ctx.drawImage(img, 0, 0);
42-
const imageData = ctx.getImageData(
43-
0,
44-
0,
45-
img.width,
46-
img.height
47-
);
48-
const data = new Uint8Array(imageData.data.buffer); // Direct conversion
49-
resolve({
50-
data: data,
51-
width: img.width,
52-
height: img.height,
53-
channels: 4,
54-
});
55-
};
56-
img.onerror = reject;
57-
img.src = base64Image;
58-
});
59-
};
31+
// const base64ToImageData = async (
32+
// base64Image: string
33+
// ): Promise<IImage> => {
34+
// return new Promise((resolve, reject) => {
35+
// const img = new Image();
36+
// img.onload = () => {
37+
// const canvas = document.createElement("canvas");
38+
// canvas.width = img.width;
39+
// canvas.height = img.height;
40+
// const ctx = canvas.getContext("2d")!;
41+
// ctx.drawImage(img, 0, 0);
42+
// const imageData = ctx.getImageData(
43+
// 0,
44+
// 0,
45+
// img.width,
46+
// img.height
47+
// );
48+
// const data = new Uint8Array(imageData.data.buffer); // Direct conversion
49+
// resolve({
50+
// data: data,
51+
// width: img.width,
52+
// height: img.height,
53+
// channels: 4,
54+
// });
55+
// };
56+
// img.onerror = reject;
57+
// img.src = base64Image;
58+
// });
59+
// };
6060

61-
const resizeImageToMatchReference = (
62-
base64Reference: string,
63-
base64Target: string
64-
): Promise<string> => {
65-
return new Promise((resolve) => {
66-
const referenceImage = new Image();
67-
referenceImage.onload = function () {
68-
const referenceWidth = referenceImage.width;
69-
const referenceHeight = referenceImage.height;
61+
// const resizeImageToMatchReference = (
62+
// base64Reference: string,
63+
// base64Target: string
64+
// ): Promise<string> => {
65+
// return new Promise((resolve) => {
66+
// const referenceImage = new Image();
67+
// referenceImage.onload = function () {
68+
// const referenceWidth = referenceImage.width;
69+
// const referenceHeight = referenceImage.height;
7070

71-
const targetImage = new Image();
72-
targetImage.onload = function () {
73-
const targetAspectRatio =
74-
targetImage.width / targetImage.height;
75-
let newWidth, newHeight;
71+
// const targetImage = new Image();
72+
// targetImage.onload = function () {
73+
// const targetAspectRatio =
74+
// targetImage.width / targetImage.height;
75+
// let newWidth, newHeight;
7676

77-
if (targetImage.width > targetImage.height) {
78-
// Landscape mode
79-
newWidth = referenceWidth;
80-
newHeight = newWidth / targetAspectRatio;
81-
} else {
82-
// Portrait mode or square
83-
newHeight = referenceHeight;
84-
newWidth = newHeight * targetAspectRatio;
85-
}
77+
// if (targetImage.width > targetImage.height) {
78+
// // Landscape mode
79+
// newWidth = referenceWidth;
80+
// newHeight = newWidth / targetAspectRatio;
81+
// } else {
82+
// // Portrait mode or square
83+
// newHeight = referenceHeight;
84+
// newWidth = newHeight * targetAspectRatio;
85+
// }
8686

87-
const canvas = document.createElement("canvas");
88-
canvas.width = referenceWidth;
89-
canvas.height = referenceHeight;
90-
const ctx = canvas.getContext("2d")!;
91-
ctx.fillStyle = "#FFFFFF"; // White background
92-
ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas with white
93-
ctx.drawImage(
94-
targetImage,
95-
(referenceWidth - newWidth) / 2,
96-
(referenceHeight - newHeight) / 2,
97-
newWidth,
98-
newHeight
99-
);
87+
// const canvas = document.createElement("canvas");
88+
// canvas.width = referenceWidth;
89+
// canvas.height = referenceHeight;
90+
// const ctx = canvas.getContext("2d")!;
91+
// ctx.fillStyle = "#FFFFFF"; // White background
92+
// ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas with white
93+
// ctx.drawImage(
94+
// targetImage,
95+
// (referenceWidth - newWidth) / 2,
96+
// (referenceHeight - newHeight) / 2,
97+
// newWidth,
98+
// newHeight
99+
// );
100100

101-
resolve(canvas.toDataURL()); // Return the base64 of the resized image
102-
};
103-
targetImage.src = base64Target;
104-
};
105-
referenceImage.src = base64Reference;
106-
});
107-
};
101+
// resolve(canvas.toDataURL()); // Return the base64 of the resized image
102+
// };
103+
// targetImage.src = base64Target;
104+
// };
105+
// referenceImage.src = base64Reference;
106+
// });
107+
// };
108108

109-
const compareImages = async (image1: string, image2: string) => {
110-
const resizedImg1 = await resizeImageToMatchReference(
111-
image2,
112-
image1
113-
);
109+
// const compareImages = async (image1: string, image2: string) => {
110+
// const resizedImg1 = await resizeImageToMatchReference(
111+
// image2,
112+
// image1
113+
// );
114114

115-
const imgData1 = await base64ToImageData(resizedImg1);
116-
const imgData2 = await base64ToImageData(image2);
115+
// const imgData1 = await base64ToImageData(resizedImg1);
116+
// const imgData2 = await base64ToImageData(image2);
117117

118-
const ssimResult = compare(imgData1, imgData2);
119-
toast.success(`SSIM Score: ${ssimResult.ssim}`);
120-
};
118+
// const ssimResult = compare(imgData1, imgData2);
119+
// toast.success(`SSIM Score: ${ssimResult.ssim}`);
120+
// };
121121

122-
unsubscribe = useSessionStore.subscribe(async (state: State) => {
123-
const { userImg, imgPrompt, reset, setCode } = state;
124-
if (justReset) {
125-
justReset = false;
126-
return;
127-
}
128-
if (!userImg || !imgPrompt) {
129-
return;
130-
}
131-
try {
132-
await compareImages(userImg, imgPrompt);
133-
justReset = true;
134-
reset();
135-
setCode(LandingPageCode());
136-
} catch (err) {
137-
console.error("An error occurred while comparing images:", err);
138-
} finally {
139-
if (unsubscribe) {
140-
unsubscribe();
141-
}
142-
sessionStore.setLoading(false);
143-
}
144-
});
145-
} catch (error) {
146-
toast.error(`Something went wrong`);
147-
sessionStore.setLoading(false);
148-
}
149-
};
122+
// unsubscribe = useSessionStore.subscribe(async (state: State) => {
123+
// const { userImg, imgPrompt, reset, setCode } = state;
124+
// if (justReset) {
125+
// justReset = false;
126+
// return;
127+
// }
128+
// if (!userImg || !imgPrompt) {
129+
// return;
130+
// }
131+
// try {
132+
// await compareImages(userImg, imgPrompt);
133+
// justReset = true;
134+
// reset();
135+
// setCode(LandingPageCode());
136+
// } catch (err) {
137+
// console.error("An error occurred while comparing images:", err);
138+
// } finally {
139+
// if (unsubscribe) {
140+
// unsubscribe();
141+
// }
142+
// sessionStore.setLoading(false);
143+
// }
144+
// });
145+
// } catch (error) {
146+
// toast.error(`Something went wrong`);
147+
// sessionStore.setLoading(false);
148+
// }
149+
// };

0 commit comments

Comments
 (0)