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

Merge branch 'main' into hosted

Browse Source
This commit is contained in:
Abi Raja 2023-12-21 10:56:52 -05:00
commit 9bc5817aa4
2 changed files with 32 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# screenshot-to-code
This simple app converts a screenshot to code (HTML/Tailwind CSS, or React or Vue or Bootstrap). It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website!
This simple app converts a screenshot to code (HTML/Tailwind CSS, or React or Bootstrap). It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website!
https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045

61
frontend/src/components/ImageUpload.tsx
View File

@ -1,4 +1,5 @@
import { useState, useEffect, useMemo, useCallback } from "react";
import { useState, useEffect, useMemo } from "react";
// useCallback
import { useDropzone } from "react-dropzone";
// import { PromptImage } from "../../../types";
import { toast } from "react-hot-toast";
@ -89,39 +90,39 @@ function ImageUpload({ setReferenceImages }: Props) {
},
});
const pasteEvent = useCallback(
(event: ClipboardEvent) => {
const clipboardData = event.clipboardData;
if (!clipboardData) return;
// const pasteEvent = useCallback(
// (event: ClipboardEvent) => {
// const clipboardData = event.clipboardData;
// if (!clipboardData) return;
const items = clipboardData.items;
const files = [];
for (let i = 0; i < items.length; i++) {
const file = items[i].getAsFile();
if (file && file.type.startsWith("image/")) {
files.push(file);
}
}
// const items = clipboardData.items;
// const files = [];
// for (let i = 0; i < items.length; i++) {
// const file = items[i].getAsFile();
// if (file && file.type.startsWith("image/")) {
// files.push(file);
// }
// }
// Convert images to data URLs and set the prompt images state
Promise.all(files.map((file) => fileToDataURL(file)))
.then((dataUrls) => {
if (dataUrls.length > 0) {
setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
}
})
.catch((error) => {
// TODO: Display error to user
console.error("Error reading files:", error);
});
},
[setReferenceImages]
);
// // Convert images to data URLs and set the prompt images state
// Promise.all(files.map((file) => fileToDataURL(file)))
// .then((dataUrls) => {
// if (dataUrls.length > 0) {
// setReferenceImages(dataUrls.map((dataUrl) => dataUrl as string));
// }
// })
// .catch((error) => {
// // TODO: Display error to user
// console.error("Error reading files:", error);
// });
// },
// [setReferenceImages]
// );
// TODO: Make sure we don't listen to paste events in text input components
useEffect(() => {
window.addEventListener("paste", pasteEvent);
}, [pasteEvent]);
// useEffect(() => {
// window.addEventListener("paste", pasteEvent);
// }, [pasteEvent]);
useEffect(() => {
return () => files.forEach((file) => URL.revokeObjectURL(file.preview));