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

extract html to show a preview for video mode and switch to .srcdoc with throttling for the preview

Browse Source
This commit is contained in:
Abi Raja 2024-03-08 11:16:49 -05:00
parent a0f5af0fdc
commit caa63013f5
4 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/App.tsx
View File

@ -37,6 +37,7 @@ import ImportCodeSection from "./components/ImportCodeSection";
import { Stack } from "./lib/stacks"; import { Stack } from "./lib/stacks";
import { CodeGenerationModel } from "./lib/models"; import { CodeGenerationModel } from "./lib/models";
import ModelSettingsSection from "./components/ModelSettingsSection"; import ModelSettingsSection from "./components/ModelSettingsSection";
import { extractHtml } from "./components/preview/extractHtml";
const IS_OPENAI_DOWN = false; const IS_OPENAI_DOWN = false;
@ -142,9 +143,10 @@ function App() {
cancelCodeGenerationAndReset(); cancelCodeGenerationAndReset();
}; };
const shouldDisablePreview = inputMode === "video";
const previewCode = const previewCode =
shouldDisablePreview && appState === AppState.CODING ? "" : generatedCode; inputMode === "video" && appState === AppState.CODING
? extractHtml(generatedCode)
: generatedCode;
const cancelCodeGenerationAndReset = () => { const cancelCodeGenerationAndReset = () => {
// When this is the first version, reset the entire app state // When this is the first version, reset the entire app state

15
frontend/src/components/Preview.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import classNames from "classnames"; import classNames from "classnames";
// import useThrottle from "../hooks/useThrottle"; import useThrottle from "../hooks/useThrottle";
interface Props { interface Props {
code: string; code: string;
@ -8,17 +8,14 @@ interface Props {
} }
function Preview({ code, device }: Props) { function Preview({ code, device }: Props) {
const throttledCode = code;
// Temporary disable throttling for the preview not updating when the code changes
// useThrottle(code, 200);
const iframeRef = useRef<HTMLIFrameElement | null>(null); const iframeRef = useRef<HTMLIFrameElement | null>(null);
// Don't update code more often than every 200ms.
const throttledCode = useThrottle(code, 200);
useEffect(() => { useEffect(() => {
const iframe = iframeRef.current; if (iframeRef.current) {
if (iframe && iframe.contentDocument) { iframeRef.current.srcdoc = throttledCode;
iframe.contentDocument.open();
iframe.contentDocument.write(throttledCode);
iframe.contentDocument.close();
} }
}, [throttledCode]); }, [throttledCode]);

4
frontend/src/components/preview/extractHtml.ts Normal file
View File

@ -0,0 +1,4 @@
export function extractHtml(code: string): string {
const htmlStartIndex = code.indexOf("<html>");
return htmlStartIndex !== -1 ? code.slice(htmlStartIndex) : "";
}

10
frontend/src/components/preview/simpleHash.ts Normal file
View File

@ -0,0 +1,10 @@
export function simpleHash(str: string, seed = 0) {
let hash = seed;
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i);
hash = (hash << 5) - hash + char;
hash |= 0; // Convert to 32bit integer
}
return hash;
}