Upload 26 files

assets/index.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+* {
+  font-family: "Noto Sans";
+}
+
+.font-code {
+  font-family: "Source Code Pro";
+}

components/App.tsx

@@ -0,0 +1,269 @@
+import { useRef, useState } from "react";
+import Editor from "@monaco-editor/react";
+import classNames from "classnames";
+import { editor } from "monaco-editor";
+import {
+  useMount,
+  useUnmount,
+  useEvent,
+  useLocalStorage,
+  useSearchParam,
+} from "react-use";
+import { toast } from "react-toastify";
+
+import Header from "./header/header";
+import DeployButton from "./deploy-button/deploy-button";
+import { defaultHTML } from "./../../utils/consts";
+import Tabs from "./tabs/tabs";
+import AskAI from "./ask-ai/ask-ai";
+import { Auth } from "./../../utils/types";
+import Preview from "./preview/preview";
+
+function App() {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
+  const remix = useSearchParam("remix");
+
+  const preview = useRef<HTMLDivElement>(null);
+  const editor = useRef<HTMLDivElement>(null);
+  const resizer = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [error, setError] = useState(false);
+  const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
+  const [isAiWorking, setisAiWorking] = useState(false);
+  const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const [currentView, setCurrentView] = useState<"editor" | "preview">(
+    "editor"
+  );
+  const [prompts, setPrompts] = useState<string[]>([]);
+
+  const fetchMe = async () => {
+    const res = await fetch("/api/@me");
+    if (res.ok) {
+      const data = await res.json();
+      setAuth(data);
+    } else {
+      setAuth(undefined);
+    }
+  };
+
+  const fetchRemix = async () => {
+    if (!remix) return;
+    const res = await fetch(`/api/remix/${remix}`);
+    if (res.ok) {
+      const data = await res.json();
+      if (data.html) {
+        setHtml(data.html);
+        toast.success("Remix content loaded successfully.");
+      }
+    } else {
+      toast.error("Failed to load remix content.");
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.delete("remix");
+    window.history.replaceState({}, document.title, url.toString());
+  };
+
+  /**
+   * Resets the layout based on screen size
+   * - For desktop: Sets editor to 1/3 width and preview to 2/3
+   * - For mobile: Removes inline styles to let CSS handle it
+   */
+  const resetLayout = () => {
+    if (!editor.current || !preview.current) return;
+
+    // lg breakpoint is 1024px based on useBreakpoint definition and Tailwind defaults
+    if (window.innerWidth >= 1024) {
+      // Set initial 1/3 - 2/3 sizes for large screens, accounting for resizer width
+      const resizerWidth = resizer.current?.offsetWidth ?? 8; // w-2 = 0.5rem = 8px
+      const availableWidth = window.innerWidth - resizerWidth;
+      const initialEditorWidth = availableWidth / 3; // Editor takes 1/3 of space
+      const initialPreviewWidth = availableWidth - initialEditorWidth; // Preview takes 2/3
+      editor.current.style.width = `${initialEditorWidth}px`;
+      preview.current.style.width = `${initialPreviewWidth}px`;
+    } else {
+      // Remove inline styles for smaller screens, let CSS flex-col handle it
+      editor.current.style.width = "";
+      preview.current.style.width = "";
+    }
+  };
+
+  /**
+   * Handles resizing when the user drags the resizer
+   * Ensures minimum widths are maintained for both panels
+   */
+  const handleResize = (e: MouseEvent) => {
+    if (!editor.current || !preview.current || !resizer.current) return;
+
+    const resizerWidth = resizer.current.offsetWidth;
+    const minWidth = 100; // Minimum width for editor/preview
+    const maxWidth = window.innerWidth - resizerWidth - minWidth;
+
+    const editorWidth = e.clientX;
+    const clampedEditorWidth = Math.max(
+      minWidth,
+      Math.min(editorWidth, maxWidth)
+    );
+    const calculatedPreviewWidth =
+      window.innerWidth - clampedEditorWidth - resizerWidth;
+
+    editor.current.style.width = `${clampedEditorWidth}px`;
+    preview.current.style.width = `${calculatedPreviewWidth}px`;
+  };
+
+  const handleMouseDown = () => {
+    setIsResizing(true);
+    document.addEventListener("mousemove", handleResize);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleMouseUp = () => {
+    setIsResizing(false);
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  // Prevent accidental navigation away when AI is working or content has changed
+  useEvent("beforeunload", (e) => {
+    if (isAiWorking || html !== defaultHTML) {
+      e.preventDefault();
+      return "";
+    }
+  });
+
+  // Initialize component on mount
+  useMount(() => {
+    // Fetch user data
+    fetchMe();
+    fetchRemix();
+
+    // Restore content from storage if available
+    if (htmlStorage) {
+      removeHtmlStorage();
+      toast.warn("Previous HTML content restored from local storage.");
+    }
+
+    // Set initial layout based on window size
+    resetLayout();
+
+    // Attach event listeners
+    if (!resizer.current) return;
+    resizer.current.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("resize", resetLayout);
+  });
+
+  // Clean up event listeners on unmount
+  useUnmount(() => {
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (resizer.current) {
+      resizer.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    window.removeEventListener("resize", resetLayout);
+  });
+
+  return (
+    <div className="h-screen bg-gray-950 font-sans overflow-hidden">
+      <Header
+        onReset={() => {
+          if (isAiWorking) {
+            toast.warn("Please wait for the AI to finish working.");
+            return;
+          }
+          if (
+            window.confirm("You're about to reset the editor. Are you sure?")
+          ) {
+            setHtml(defaultHTML);
+            setError(false);
+            removeHtmlStorage();
+            editorRef.current?.revealLine(
+              editorRef.current?.getModel()?.getLineCount() ?? 0
+            );
+          }
+        }}
+      >
+        <DeployButton
+          html={html}
+          error={error}
+          auth={auth}
+          setHtml={setHtml}
+          prompts={prompts}
+        />
+      </Header>
+      <main className="max-lg:flex-col flex w-full">
+        <div
+          ref={editor}
+          className={classNames(
+            "w-full h-[calc(100dvh-49px)] lg:h-[calc(100dvh-54px)] relative overflow-hidden max-lg:transition-all max-lg:duration-200 select-none",
+            {
+              "max-lg:h-0": currentView === "preview",
+            }
+          )}
+        >
+          <Tabs />
+          <div
+            onClick={(e) => {
+              if (isAiWorking) {
+                e.preventDefault();
+                e.stopPropagation();
+                toast.warn("Please wait for the AI to finish working.");
+              }
+            }}
+          >
+            <Editor
+              language="html"
+              theme="vs-dark"
+              className={classNames(
+                "h-[calc(100dvh-90px)] lg:h-[calc(100dvh-96px)]",
+                {
+                  "pointer-events-none": isAiWorking,
+                }
+              )}
+              value={html}
+              onValidate={(markers) => {
+                if (markers?.length > 0) {
+                  setError(true);
+                }
+              }}
+              onChange={(value) => {
+                const newValue = value ?? "";
+                setHtml(newValue);
+                setError(false);
+              }}
+              onMount={(editor) => (editorRef.current = editor)}
+            />
+          </div>
+          <AskAI
+            html={html}
+            setHtml={setHtml}
+            isAiWorking={isAiWorking}
+            setisAiWorking={setisAiWorking}
+            setView={setCurrentView}
+            onNewPrompt={(prompt) => {
+              setPrompts((prev) => [...prev, prompt]);
+            }}
+            onScrollToBottom={() => {
+              editorRef.current?.revealLine(
+                editorRef.current?.getModel()?.getLineCount() ?? 0
+              );
+            }}
+          />
+        </div>
+        <div
+          ref={resizer}
+          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-53px)] max-lg:hidden"
+        />
+        <Preview
+          html={html}
+          isResizing={isResizing}
+          isAiWorking={isAiWorking}
+          ref={preview}
+          setView={setCurrentView}
+        />
+      </main>
+    </div>
+  );
+}
+
+export default App;

components/ask-ai/ask-ai.tsx

@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { RiSparkling2Fill } from "react-icons/ri";
+import { GrSend } from "react-icons/gr";
+import classNames from "classnames";
+import { toast } from "react-toastify";
+import { useLocalStorage } from "react-use";
+import { MdPreview } from "react-icons/md";
+
+import Login from "../login/login";
+import { defaultHTML } from "./../../../utils/consts";
+import SuccessSound from "./../../assets/success.mp3";
+import Settings from "../settings/settings";
+import ProModal from "../pro-modal/pro-modal";
+// import SpeechPrompt from "../speech-prompt/speech-prompt";
+
+function AskAI({
+  html,
+  setHtml,
+  onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+  setView,
+  onNewPrompt,
+}: {
+  html: string;
+  setHtml: (html: string) => void;
+  onScrollToBottom: () => void;
+  isAiWorking: boolean;
+  onNewPrompt: (prompt: string) => void;
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const [hasAsked, setHasAsked] = useState(false);
+  const [previousPrompt, setPreviousPrompt] = useState("");
+  const [provider, setProvider] = useLocalStorage("provider", "auto");
+  const [openProvider, setOpenProvider] = useState(false);
+  const [providerError, setProviderError] = useState("");
+  const [openProModal, setOpenProModal] = useState(false);
+
+  const audio = new Audio(SuccessSound);
+  audio.volume = 0.5;
+
+  const callAi = async () => {
+    if (isAiWorking || !prompt.trim()) return;
+    setisAiWorking(true);
+    setProviderError("");
+
+    let contentResponse = "";
+    let lastRenderTime = 0;
+    try {
+      onNewPrompt(prompt);
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          provider,
+          ...(html === defaultHTML ? {} : { html }),
+          ...(previousPrompt ? { previousPrompt } : {}),
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (request && request.body) {
+        if (!request.ok) {
+          const res = await request.json();
+          if (res.openLogin) {
+            setOpen(true);
+          } else if (res.openSelectProvider) {
+            setOpenProvider(true);
+            setProviderError(res.message);
+          } else if (res.openProModal) {
+            setOpenProModal(true);
+          } else {
+            toast.error(res.message);
+          }
+          setisAiWorking(false);
+          return;
+        }
+        const reader = request.body.getReader();
+        const decoder = new TextDecoder("utf-8");
+
+        const read = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            toast.success("AI responded successfully");
+            setPrompt("");
+            setPreviousPrompt(prompt);
+            setisAiWorking(false);
+            setHasAsked(true);
+            audio.play();
+            setView("preview");
+
+            // Now we have the complete HTML including </html>, so set it to be sure
+            const finalDoc = contentResponse.match(
+              /<!DOCTYPE html>[\s\S]*<\/html>/
+            )?.[0];
+            if (finalDoc) {
+              setHtml(finalDoc);
+            }
+
+            return;
+          }
+
+          const chunk = decoder.decode(value, { stream: true });
+          contentResponse += chunk;
+          const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
+          if (newHtml) {
+            // Force-close the HTML tag so the iframe doesn't render half-finished markup
+            let partialDoc = newHtml;
+            if (!partialDoc.includes("</html>")) {
+              partialDoc += "\n</html>";
+            }
+
+            // Throttle the re-renders to avoid flashing/flicker
+            const now = Date.now();
+            if (now - lastRenderTime > 300) {
+              setHtml(partialDoc);
+              lastRenderTime = now;
+            }
+
+            if (partialDoc.length > 200) {
+              onScrollToBottom();
+            }
+          }
+          read();
+        };
+
+        read();
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setisAiWorking(false);
+      toast.error(error.message);
+      if (error.openLogin) {
+        setOpen(true);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`bg-gray-950 rounded-xl py-2 lg:py-2.5 pl-3.5 lg:pl-4 pr-2 lg:pr-2.5 absolute lg:sticky bottom-3 left-3 lg:bottom-4 lg:left-4 w-[calc(100%-1.5rem)] lg:w-[calc(100%-2rem)] z-10 group ${
+        isAiWorking ? "animate-pulse" : ""
+      }`}
+    >
+      {defaultHTML !== html && (
+        <button
+          className="bg-white lg:hidden -translate-y-[calc(100%+8px)] absolute left-0 top-0 shadow-md text-gray-950 text-xs font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("preview")}
+        >
+          <MdPreview className="text-sm" />
+          View Preview
+        </button>
+      )}
+      <div className="w-full relative flex items-center justify-between">
+        <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
+        <input
+          type="text"
+          disabled={isAiWorking}
+          className="w-full bg-transparent max-lg:text-sm outline-none px-3 text-white placeholder:text-gray-500 font-code"
+          placeholder={
+            hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
+          }
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              callAi();
+            }
+          }}
+        />
+        <div className="flex items-center justify-end gap-2">
+          {/* <SpeechPrompt setPrompt={setPrompt} /> */}
+          <Settings
+            provider={provider as string}
+            onChange={setProvider}
+            open={openProvider}
+            error={providerError}
+            onClose={setOpenProvider}
+          />
+          <button
+            disabled={isAiWorking}
+            className="relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-pink-500 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+            onClick={callAi}
+          >
+            <GrSend className="-translate-x-[1px]" />
+          </button>
+        </div>
+      </div>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => setOpen(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <Login html={html}>
+          <p className="text-gray-500 text-sm mb-3">
+            You reached the limit of free AI usage. Please login to continue.
+          </p>
+        </Login>
+      </div>
+      <ProModal
+        html={html}
+        open={openProModal}
+        onClose={() => setOpenProModal(false)}
+      />
+    </div>
+  );
+}
+
+export default AskAI;

components/deploy-button/deploy-button.tsx

@@ -0,0 +1,224 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import classNames from "classnames";
+import { toast } from "react-toastify";
+import { FaPowerOff } from "react-icons/fa6";
+
+import SpaceIcon from "@/assets/space.svg";
+import Loading from "../loading/loading";
+import Login from "../login/login";
+import { Auth } from "./../../../utils/types";
+import LoadButton from "../load-button/load-button";
+
+const MsgToast = ({ url }: { url: string }) => (
+  <div className="w-full flex items-center justify-center gap-3">
+    Your space is live!
+    <button
+      className="bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer"
+      onClick={() => {
+        window.open(url, "_blank");
+      }}
+    >
+      See Space
+    </button>
+  </div>
+);
+
+function DeployButton({
+  html,
+  error = false,
+  auth,
+  setHtml,
+  prompts,
+}: {
+  html: string;
+  error: boolean;
+  auth?: Auth;
+  setHtml: (html: string) => void;
+  prompts: string[];
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [path, setPath] = useState<string | undefined>(undefined);
+
+  const [config, setConfig] = useState({
+    title: "",
+  });
+
+  const createSpace = async () => {
+    setLoading(true);
+
+    try {
+      const request = await fetch("/api/deploy", {
+        method: "POST",
+        body: JSON.stringify({
+          title: config.title,
+          path,
+          html,
+          prompts,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const response = await request.json();
+      if (response.ok) {
+        toast.success(
+          <MsgToast
+            url={`https://huggingface.co/spaces/${response.path ?? path}`}
+          />,
+          {
+            autoClose: 10000,
+          }
+        );
+        setPath(response.path);
+      } else {
+        toast.error(response.message);
+      }
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-end gap-5">
+      <LoadButton auth={auth} setHtml={setHtml} setPath={setPath} />
+      <div className="relative flex items-center justify-end">
+        {auth &&
+          (auth.isLocalUse ? (
+            <>
+              <div className="bg-amber-500/10 border border-amber-10 text-amber-500 font-semibold leading-5 lg:leading-6 py-1 px-5 text-xs lg:text-sm rounded-md mr-4 select-none">
+                Local Usage
+              </div>
+            </>
+          ) : (
+            <>
+              <button
+                className="mr-2 cursor-pointer"
+                onClick={() => {
+                  if (confirm("Are you sure you want to log out?")) {
+                    // go to /auth/logout page
+                    window.location.href = "/auth/logout";
+                  }
+                }}
+              >
+                <FaPowerOff className="text-lg text-red-500" />
+              </button>
+              <p className="mr-3 text-xs lg:text-sm text-gray-300">
+                <span className="max-lg:hidden">Connected as </span>
+                <a
+                  href={`https://huggingface.co/${auth.preferred_username}`}
+                  target="_blank"
+                  className="underline hover:text-white"
+                >
+                  {auth.preferred_username}
+                </a>
+              </p>
+            </>
+          ))}
+        <button
+          className={classNames(
+            "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
+            {
+              "bg-pink-400": open,
+              "bg-pink-500": !open,
+            }
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          {path ? "Update Space" : "Deploy to Space"}
+        </button>
+        <div
+          className={classNames(
+            "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+          onClick={() => setOpen(false)}
+        ></div>
+        <div
+          className={classNames(
+            "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+        >
+          {!auth ? (
+            <Login html={html}>
+              <p className="text-gray-500 text-sm mb-3">
+                Host this project for free and share it with your friends.
+              </p>
+            </Login>
+          ) : (
+            <>
+              <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+                <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+                  <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+                  Space
+                </span>
+                Configure Deployment
+              </header>
+              <main className="px-4 pt-3 pb-4 space-y-3">
+                <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
+                  {path ? (
+                    <span>
+                      Your space is live at{" "}
+                      <a
+                        href={`https://huggingface.co/spaces/${path}`}
+                        target="_blank"
+                        className="underline hover:text-amber-700"
+                      >
+                        huggingface.co/{path}
+                      </a>
+                      . You can update it by deploying again.
+                    </span>
+                  ) : (
+                    "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
+                  )}
+                </p>
+                {!path && (
+                  <label className="block">
+                    <p className="text-gray-600 text-sm font-medium mb-1.5">
+                      Space Title
+                    </p>
+                    <input
+                      type="text"
+                      value={config.title}
+                      className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                      placeholder="My Awesome Space"
+                      onChange={(e) =>
+                        setConfig({ ...config, title: e.target.value })
+                      }
+                    />
+                  </label>
+                )}
+                {error && (
+                  <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
+                    Your code has errors. Fix them before deploying.
+                  </p>
+                )}
+                <div className="pt-2 text-right">
+                  <button
+                    disabled={error || loading || (!path && !config.title)}
+                    className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                    onClick={createSpace}
+                  >
+                    {path ? "Update Space" : "Create Space"}
+                    {loading && <Loading />}
+                  </button>
+                </div>
+              </main>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DeployButton;

components/header/header.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { MdAdd } from "react-icons/md";
+
+import Logo from "@/assets/logo.svg";
+
+function Header({
+  onReset,
+  children,
+}: {
+  onReset: () => void;
+  children?: ReactNode;
+}) {
+  return (
+    <header className="border-b border-gray-900 bg-gray-950 px-3 lg:px-6 py-2 flex justify-between items-center sticky top-0 z-20">
+      <div className="flex items-center justify-start gap-3">
+        <h1 className="text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+          <img
+            src={Logo}
+            alt="DeepSite Logo"
+            className="size-6 lg:size-8 mr-2"
+          />
+          DeepSite
+        </h1>
+        <p className="text-gray-700 max-md:hidden">|</p>
+        <button
+          className="max-md:hidden relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs font-semibold leading-4 py-1.5 px-3 hover:bg-gray-700 text-gray-100 shadow-sm dark:shadow-highlight/20 bg-gray-800"
+          onClick={onReset}
+        >
+          <MdAdd className="mr-1 text-base" />
+          New
+        </button>
+        <p className="text-gray-500 text-sm max-md:hidden">
+          Imagine and Share in 1-Click
+        </p>
+      </div>
+      {children}
+    </header>
+  );
+}
+
+export default Header;

components/load-button/load-button.tsx

@@ -0,0 +1,135 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+import SpaceIcon from "@/assets/space.svg";
+import Loading from "../loading/loading";
+import { Auth } from "../../../utils/types";
+
+function LoadButton({
+  auth,
+  setHtml,
+  setPath,
+}: {
+  auth?: Auth;
+  setHtml: (html: string) => void;
+  setPath: (path?: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [url, setUrl] = useState<string | undefined>(undefined);
+
+  const loadSpace = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/remix/${url}`);
+      const data = await res.json();
+      if (res.ok) {
+        if (data.html) {
+          setHtml(data.html);
+          toast.success("Space loaded successfully.");
+        }
+        if (data.isOwner) {
+          setPath(data.path);
+        } else {
+          setPath(undefined);
+        }
+        setOpen(false);
+      } else {
+        toast.error(data.message);
+        setError(data.message);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      toast.error(error.message);
+      setError(error.message);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <div
+      className={classNames("max-md:hidden", {
+        "border-r border-gray-700 pr-5": auth,
+      })}
+    >
+      <p
+        className="underline hover:text-white cursor-pointer text-xs lg:text-sm text-gray-300"
+        onClick={() => setOpen(!open)}
+      >
+        Load Space
+      </p>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => setOpen(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-[calc(100%+8px)] right-2 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <>
+          <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+            <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+              <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+              Space
+            </span>
+            Load Project
+          </header>
+          <main className="px-4 pt-3 pb-4 space-y-3">
+            <p className="text-sm text-pink-600 bg-pink-100 rounded-md px-3 py-2">
+              Load an existing DeepSite Space to continue working on it.
+            </p>
+            <label className="block">
+              <p className="text-gray-600 text-sm font-medium mb-1.5">
+                Space URL
+              </p>
+              <input
+                type="text"
+                value={url}
+                className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                placeholder="https://huggingface.co/spaces/username/space-name"
+                onChange={(e) => setUrl(e.target.value)}
+                onFocus={() => setError(false)}
+                onBlur={(e) => {
+                  const pathParts = e.target.value.split("/");
+                  setUrl(
+                    `${pathParts[pathParts.length - 2]}/${
+                      pathParts[pathParts.length - 1]
+                    }`
+                  );
+                  setError(false);
+                }}
+              />
+            </label>
+            {error && (
+              <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2 break-all">
+                {error}
+              </p>
+            )}
+            <div className="pt-2 text-right">
+              <button
+                disabled={error || loading || !url}
+                className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                onClick={loadSpace}
+              >
+                Load Space
+                {loading && <Loading />}
+              </button>
+            </div>
+          </main>
+        </>
+      </div>
+    </div>
+  );
+}
+export default LoadButton;

components/loading/loading.tsx

@@ -0,0 +1,28 @@
+function Loading() {
+  return (
+    <div className="absolute left-0 top-0 h-full w-full flex items-center justify-center bg-white/30 z-20">
+      <svg
+        className="size-5 animate-spin text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    </div>
+  );
+}
+
+export default Loading;

components/login/login.tsx

@@ -0,0 +1,46 @@
+import { useLocalStorage } from "react-use";
+import { defaultHTML } from "./../../../utils/consts";
+
+function Login({
+  html,
+  children,
+}: {
+  html?: string;
+  children?: React.ReactNode;
+}) {
+  const [, setStorage] = useLocalStorage("html_content");
+
+  const handleClick = async () => {
+    if (html !== defaultHTML) {
+      setStorage(html);
+    }
+    const request = await fetch("/api/login");
+    const res = await request.json();
+    if (res?.redirectUrl) {
+      window.open(res.redirectUrl, "_blank");
+    }
+  };
+
+  return (
+    <>
+      <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+        <span className="text-xs bg-red-500/10 text-red-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+          REQUIRED
+        </span>
+        Login with Hugging Face
+      </header>
+      <main className="px-4 py-4 space-y-3">
+        {children}
+        <button onClick={handleClick}>
+          <img
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg-dark.svg"
+            alt="Sign in with Hugging Face"
+            className="mx-auto"
+          />
+        </button>
+      </main>
+    </>
+  );
+}
+
+export default Login;

components/preview/preview.tsx

@@ -0,0 +1,85 @@
+import classNames from "classnames";
+import { useRef } from "react";
+import { TbReload } from "react-icons/tb";
+import { toast } from "react-toastify";
+import { FaLaptopCode } from "react-icons/fa6";
+import { defaultHTML } from "../../../utils/consts";
+
+function Preview({
+  html,
+  isResizing,
+  isAiWorking,
+  setView,
+  ref,
+}: {
+  html: string;
+  isResizing: boolean;
+  isAiWorking: boolean;
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
+  ref: React.RefObject<HTMLDivElement | null>;
+}) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const handleRefreshIframe = () => {
+    if (iframeRef.current) {
+      const iframe = iframeRef.current;
+      const content = iframe.srcdoc;
+      iframe.srcdoc = "";
+      setTimeout(() => {
+        iframe.srcdoc = content;
+      }, 10);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative"
+      onClick={(e) => {
+        if (isAiWorking) {
+          e.preventDefault();
+          e.stopPropagation();
+          toast.warn("Please wait for the AI to finish working.");
+        }
+      }}
+    >
+      <iframe
+        ref={iframeRef}
+        title="output"
+        className={classNames("w-full h-full select-none", {
+          "pointer-events-none": isResizing || isAiWorking,
+        })}
+        srcDoc={html}
+      />
+      <div className="flex items-center justify-start gap-3 absolute bottom-3 lg:bottom-5 max-lg:left-3 lg:right-5">
+        <button
+          className="lg:hidden bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("editor")}
+        >
+          <FaLaptopCode className="text-sm" />
+          Hide preview
+        </button>
+        {html === defaultHTML && (
+          <a
+            href="https://huggingface.co/spaces/victor/deepsite-gallery"
+            target="_blank"
+            className="bg-gray-200 text-gray-950 text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-200 hover:bg-gray-300 transition-all duration-100 cursor-pointer"
+          >
+            🖼️ <span>DeepSite Gallery</span>
+          </a>
+        )}
+        {!isAiWorking && (
+          <button
+            className="bg-white lg:bg-gray-950 shadow-md text-gray-950 lg:text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 lg:border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+            onClick={handleRefreshIframe}
+          >
+            <TbReload className="text-sm" />
+            Refresh Preview
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Preview;

components/pro-modal/pro-modal.tsx

@@ -0,0 +1,70 @@
+import classNames from "classnames";
+import { useLocalStorage } from "react-use";
+import { defaultHTML } from "../../../utils/consts";
+
+function ProModal({
+  open,
+  html,
+  onClose,
+}: {
+  open: boolean;
+  html: string;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [, setStorage] = useLocalStorage("html_content");
+
+  const handleProClick = () => {
+    if (html !== defaultHTML) {
+      setStorage(html);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+          <span className="bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 border border-gray-200 from-pink-300 via-green-200 to-yellow-200 text-xs font-bold text-black shadow-lg dark:from-pink-500 dark:via-green-500 dark:to-yellow-500 dark:text-black rounded-lg px-2.5 py-0.5 ">
+            PRO
+          </span>
+          Your free inference quota is exhausted
+        </header>
+        <main className="px-4 pt-3 pb-4">
+          <p className="text-gray-950 text-sm font-semibold flex items-center justify-between">
+            Upgrade to a PRO account to activate Inference Providers and
+            continue using DeepSite.
+          </p>
+          <p className="text-sm text-pretty text-gray-500 mt-2">
+            It also unlocks thousands of Space apps powered by ZeroGPU for 3d,
+            audio, music, video and more!
+          </p>
+          <a
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            className="mt-4 bg-black text-white cursor-pointer rounded-full py-2 px-3 text-sm font-medium w-full block text-center hover:bg-gray-800 transition duration-200 ease-in-out"
+            onClick={handleProClick}
+          >
+            Subscribe to PRO ($9/month)
+          </a>
+        </main>
+      </div>
+    </>
+  );
+}
+
+export default ProModal;

components/settings/settings.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import classNames from "classnames";
+
+import { PiGearSixFill } from "react-icons/pi";
+// @ts-expect-error not needed
+import { PROVIDERS } from "./../../../utils/providers";
+
+function Settings({
+  open,
+  onClose,
+  provider,
+  error,
+  onChange,
+}: {
+  open: boolean;
+  provider: string;
+  error?: string;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  onChange: (provider: string) => void;
+}) {
+  return (
+    <div className="">
+      <button
+        className="relative overflow-hidden cursor-pointer flex-none flex items-center justify-center rounded-full text-base font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-gray-100 shadow-sm dark:shadow-highlight/20"
+        onClick={() => {
+          onClose((prev) => !prev);
+        }}
+      >
+        <PiGearSixFill />
+      </button>
+      <div
+        className={classNames(
+          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-40",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+        onClick={() => onClose(false)}
+      ></div>
+      <div
+        className={classNames(
+          "absolute top-0 -translate-y-[calc(100%+16px)] right-0 z-40 w-96 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+          {
+            "opacity-0 pointer-events-none": !open,
+          }
+        )}
+      >
+        <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+          <span className="text-xs bg-blue-500/10 text-blue-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+            Provider
+          </span>
+          Customize Settings
+        </header>
+        <main className="px-4 pt-3 pb-4 space-y-4">
+          {/* toggle using tailwind css */}
+          <div>
+            <a
+              href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/74"
+              target="_blank"
+              className="w-full flex items-center justify-between text-gray-600 bg-gray-50 border border-gray-100 px-2 py-2 rounded-lg mb-3 text-sm font-medium hover:brightness-95"
+            >
+              How to use it locally?
+              <button className="bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer">
+                See the guide
+              </button>
+            </a>
+            <div className="flex items-center justify-between">
+              <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
+                Use auto-provider
+              </p>
+              <div
+                className={classNames(
+                  "bg-gray-200 rounded-full w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
+                  {
+                    "!bg-blue-500": provider === "auto",
+                  }
+                )}
+                onClick={() => {
+                  onChange(provider === "auto" ? "fireworks-ai" : "auto");
+                }}
+              >
+                <div
+                  className={classNames(
+                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-white",
+                    {
+                      "translate-x-4": provider === "auto",
+                    }
+                  )}
+                />
+              </div>
+            </div>
+            <p className="text-xs text-gray-500 mt-2">
+              We'll automatically select the best provider for you based on your
+              prompt.
+            </p>
+          </div>
+          {error !== "" && (
+            <p className="text-red-500 text-sm font-medium mb-2 flex items-center justify-between bg-red-500/10 p-2 rounded-md">
+              {error}
+            </p>
+          )}
+          <label className="block">
+            <p className="text-gray-800 text-sm font-medium mb-2 flex items-center justify-between">
+              Inference Provider
+            </p>
+            <div className="grid grid-cols-2 gap-1.5">
+              {Object.keys(PROVIDERS).map((id: string) => (
+                <div
+                  key={id}
+                  className={classNames(
+                    "text-gray-600 text-sm font-medium cursor-pointer border p-2 rounded-md flex items-center justify-start gap-2",
+                    {
+                      "bg-blue-500/10 border-blue-500/15 text-blue-500":
+                        id === provider,
+                      "hover:bg-gray-100 border-gray-100": id !== provider,
+                    }
+                  )}
+                  onClick={() => {
+                    onChange(id);
+                  }}
+                >
+                  <img
+                    src={`/providers/${id}.svg`}
+                    alt={PROVIDERS[id].name}
+                    className="size-5"
+                  />
+                  {PROVIDERS[id].name}
+                </div>
+              ))}
+            </div>
+          </label>
+        </main>
+      </div>
+    </div>
+  );
+}
+export default Settings;

components/speech-prompt/speech-prompt.tsx

@@ -0,0 +1,53 @@
+import classNames from "classnames";
+import { FaMicrophone } from "react-icons/fa";
+import SpeechRecognition, {
+  useSpeechRecognition,
+} from "react-speech-recognition";
+import { useUpdateEffect } from "react-use";
+
+function SpeechPrompt({
+  setPrompt,
+}: {
+  setPrompt: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const {
+    transcript,
+    listening,
+    browserSupportsSpeechRecognition,
+    resetTranscript,
+  } = useSpeechRecognition();
+
+  const startListening = () =>
+    SpeechRecognition.startListening({ continuous: true });
+
+  useUpdateEffect(() => {
+    if (transcript) setPrompt(transcript);
+  }, [transcript]);
+
+  useUpdateEffect(() => {
+    if (!listening) resetTranscript();
+  }, [listening]);
+
+  if (!browserSupportsSpeechRecognition) {
+    return null;
+  }
+
+  return (
+    <button
+      className={classNames(
+        "flex cursor-pointer flex-none items-center justify-center rounded-full text-sm font-semibold size-8 text-center bg-gray-800 hover:bg-gray-700 text-white shadow-sm dark:shadow-highlight/20 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300",
+        {
+          "animate-pulse !bg-orange-500": listening,
+        }
+      )}
+      onTouchStart={startListening}
+      onMouseDown={startListening}
+      onTouchEnd={SpeechRecognition.stopListening}
+      onMouseUp={SpeechRecognition.stopListening}
+    >
+      <FaMicrophone className="text-base" />
+    </button>
+  );
+}
+
+export default SpeechPrompt;

components/tabs/tabs.tsx

@@ -0,0 +1,29 @@
+import Deepseek from "./../../assets/deepseek-color.svg";
+
+function Tabs({ children }: { children?: React.ReactNode }) {
+  return (
+    <div className="border-b border-gray-800 pl-4 lg:pl-7 pr-3 flex items-center justify-between">
+      <div
+        className="
+      space-x-6"
+      >
+        <button className="rounded-md text-sm cursor-pointer transition-all duration-100 font-medium relative py-2.5 text-white">
+          index.html
+          <span className="absolute bottom-0 left-0 h-0.5 w-full transition-all duration-100 bg-white" />
+        </button>
+      </div>
+      <div className="flex items-center justify-end gap-3">
+        <a
+          href="https://huggingface.co/deepseek-ai/DeepSeek-V3-0324"
+          target="_blank"
+          className="text-[12px] text-gray-300 hover:brightness-120 flex items-center gap-1 font-code"
+        >
+          Powered by <img src={Deepseek} className="size-5" /> Deepseek
+        </a>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Tabs;

main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { ToastContainer } from "react-toastify";
+import "./assets/index.css";
+import App from "./components/App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+    <ToastContainer className="pt-11 max-md:p-4" />
+  </StrictMode>
+);

vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />