From caa63013f52a44edeac6d729a3b78ede438b08f3 Mon Sep 17 00:00:00 2001 From: Abi Raja Date: Fri, 8 Mar 2024 11:16:49 -0500 Subject: [PATCH] extract html to show a preview for video mode and switch to .srcdoc with throttling for the preview --- frontend/src/App.tsx | 6 ++++-- frontend/src/components/Preview.tsx | 15 ++++++--------- frontend/src/components/preview/extractHtml.ts | 4 ++++ frontend/src/components/preview/simpleHash.ts | 10 ++++++++++ 4 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/preview/extractHtml.ts create mode 100644 frontend/src/components/preview/simpleHash.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 43c2a15..a6b3358 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -37,6 +37,7 @@ import ImportCodeSection from "./components/ImportCodeSection"; import { Stack } from "./lib/stacks"; import { CodeGenerationModel } from "./lib/models"; import ModelSettingsSection from "./components/ModelSettingsSection"; +import { extractHtml } from "./components/preview/extractHtml"; const IS_OPENAI_DOWN = false; @@ -142,9 +143,10 @@ function App() { cancelCodeGenerationAndReset(); }; - const shouldDisablePreview = inputMode === "video"; const previewCode = - shouldDisablePreview && appState === AppState.CODING ? "" : generatedCode; + inputMode === "video" && appState === AppState.CODING + ? extractHtml(generatedCode) + : generatedCode; const cancelCodeGenerationAndReset = () => { // When this is the first version, reset the entire app state diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx index d2eff16..eb9ea6d 100644 --- a/frontend/src/components/Preview.tsx +++ b/frontend/src/components/Preview.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef } from "react"; import classNames from "classnames"; -// import useThrottle from "../hooks/useThrottle"; +import useThrottle from "../hooks/useThrottle"; interface Props { code: string; @@ -8,17 +8,14 @@ interface 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(null); + // Don't update code more often than every 200ms. + const throttledCode = useThrottle(code, 200); + useEffect(() => { - const iframe = iframeRef.current; - if (iframe && iframe.contentDocument) { - iframe.contentDocument.open(); - iframe.contentDocument.write(throttledCode); - iframe.contentDocument.close(); + if (iframeRef.current) { + iframeRef.current.srcdoc = throttledCode; } }, [throttledCode]); diff --git a/frontend/src/components/preview/extractHtml.ts b/frontend/src/components/preview/extractHtml.ts new file mode 100644 index 0000000..f33b206 --- /dev/null +++ b/frontend/src/components/preview/extractHtml.ts @@ -0,0 +1,4 @@ +export function extractHtml(code: string): string { + const htmlStartIndex = code.indexOf(""); + return htmlStartIndex !== -1 ? code.slice(htmlStartIndex) : ""; +} diff --git a/frontend/src/components/preview/simpleHash.ts b/frontend/src/components/preview/simpleHash.ts new file mode 100644 index 0000000..0fbd17e --- /dev/null +++ b/frontend/src/components/preview/simpleHash.ts @@ -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; +}