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