Spaces:

abdullahalivv
/

deepseek

Runtime error

App Files Files Community

abdullahalivv commited on Apr 8

Commit

664c219

verified ·

1 Parent(s): fc7c3d7

Upload 45 files

Browse files

Files changed (45) hide show

.env.example +5 -0
.gitignore +26 -0
Dockerfile +22 -0
README.md +15 -13
eslint.config.js +28 -0
index.html +29 -0
middlewares/checkUser.js +10 -0
module.d.ts +1 -0
package-lock.json +0 -0
package.json +48 -0
public/arrow.svg +10 -0
public/logo.svg +330 -0
public/providers/fireworks-ai.svg +4 -0
public/providers/hyperbolic.svg +7 -0
public/providers/nebius.svg +4 -0
public/providers/novita.svg +4 -0
public/providers/sambanova.svg +5 -0
server.js +399 -0
src/assets/deepseek-color.svg +1 -0
src/assets/index.css +9 -0
src/assets/logo.svg +330 -0
src/assets/space.svg +7 -0
src/assets/success.mp3 +0 -0
src/components/App.tsx +263 -0
src/components/ask-ai/ask-ai.tsx +224 -0
src/components/deploy-button/deploy-button.tsx +208 -0
src/components/header/header.tsx +41 -0
src/components/load-button/load-button.tsx +125 -0
src/components/loading/loading.tsx +28 -0
src/components/login/login.tsx +41 -0
src/components/preview/preview.tsx +85 -0
src/components/pro-modal/pro-modal.tsx +70 -0
src/components/settings/settings.tsx +127 -0
src/components/speech-prompt/speech-prompt.tsx +53 -0
src/components/tabs/tabs.tsx +29 -0
src/main.tsx +12 -0
src/vite-env.d.ts +1 -0
tsconfig.app.json +26 -0
tsconfig.json +13 -0
tsconfig.node.json +24 -0
utils/colors.js +9 -0
utils/consts.ts +42 -0
utils/providers.js +27 -0
utils/types.ts +5 -0
vite.config.ts +11 -0

.env.example ADDED Viewed

	@@ -0,0 +1,5 @@

+OAUTH_CLIENT_ID=
+OAUTH_CLIENT_SECRET=
+APP_PORT=5173
+REDIRECT_URI=http://localhost:5173/auth/login
+DEFAULT_HF_TOKEN=

.gitignore ADDED Viewed

	@@ -0,0 +1,26 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+.aider*

Dockerfile ADDED Viewed

	@@ -0,0 +1,22 @@

+# Dockerfile
+# Use an official Node.js runtime as the base image
+FROM node:22.1.0
+USER root
+RUN apt-get update
+USER 1000
+WORKDIR /usr/src/app
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+RUN npm install
+RUN npm run build
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 5173
+# Start the application
+CMD ["npm", "start"]

README.md CHANGED Viewed

@@ -1,13 +1,15 @@
----
-title: Deepseek
-emoji: 🚀
-colorFrom: purple
-colorTo: gray
-sdk: gradio
-sdk_version: 5.23.3
-app_file: app.py
-pinned: false
-license: mit
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: DeepSite
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
+sdk: docker
+pinned: true
+app_port: 5173
+license: mit
+short_description: Generate any application with DeepSeek
+models:
+  - deepseek-ai/DeepSeek-V3-0324
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

eslint.config.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html ADDED Viewed

	@@ -0,0 +1,29 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DeepSite | Build with AI ✨</title>
+    <meta
+      name="description"
+      content="DeepSite is a web development tool that
+    helps you build websites with AI, no code required. Let's deploy your
+    website with DeepSite and enjoy the magic of AI."
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

middlewares/checkUser.js ADDED Viewed

	@@ -0,0 +1,10 @@

+export default async function checkUser(req, res, next) {
+  const { hf_token } = req.cookies;
+  if (!hf_token) {
+    return res.status(401).send({
+      ok: false,
+      message: "Unauthorized",
+    });
+  }
+  next();
+}

module.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ declare module "react-speech-recognition";

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,48 @@

+{
+  "name": "html-space-editor",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "@huggingface/hub": "^1.1.1",
+    "@huggingface/inference": "^3.6.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@tailwindcss/vite": "^4.0.15",
+    "@xenova/transformers": "^2.17.2",
+    "body-parser": "^1.20.3",
+    "classnames": "^2.5.1",
+    "cookie-parser": "^1.4.7",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-markdown": "^10.1.0",
+    "react-speech-recognition": "^4.0.0",
+    "react-toastify": "^11.0.5",
+    "react-use": "^17.6.0",
+    "tailwindcss": "^4.0.15"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/express": "^5.0.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-speech-recognition": "^3.9.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

public/arrow.svg ADDED Viewed

public/logo.svg ADDED Viewed

public/providers/fireworks-ai.svg ADDED Viewed

public/providers/hyperbolic.svg ADDED Viewed

public/providers/nebius.svg ADDED Viewed

public/providers/novita.svg ADDED Viewed

public/providers/sambanova.svg ADDED Viewed

server.js ADDED Viewed

	@@ -0,0 +1,399 @@

+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import dotenv from "dotenv";
+import cookieParser from "cookie-parser";
+import {
+  createRepo,
+  uploadFiles,
+  whoAmI,
+  spaceInfo,
+  fileExists,
+} from "@huggingface/hub";
+import { InferenceClient } from "@huggingface/inference";
+import bodyParser from "body-parser";
+import checkUser from "./middlewares/checkUser.js";
+import { PROVIDERS } from "./utils/providers.js";
+import { COLORS } from "./utils/colors.js";
+// Load environment variables from .env file
+dotenv.config();
+const app = express();
+const ipAddresses = new Map();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PORT = process.env.APP_PORT || 3000;
+const REDIRECT_URI =
+  process.env.REDIRECT_URI || `http://localhost:${PORT}/auth/login`;
+const MODEL_ID = "deepseek-ai/DeepSeek-V3-0324";
+const MAX_REQUESTS_PER_IP = 2;
+app.use(cookieParser());
+app.use(bodyParser.json());
+app.use(express.static(path.join(__dirname, "dist")));
+const getPTag = (repoId) => {
+  return `<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=${repoId}" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>`;
+};
+app.get("/api/login", (_req, res) => {
+  res.redirect(
+    302,
+    `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`
+  );
+});
+app.get("/auth/login", async (req, res) => {
+  const { code } = req.query;
+  if (!code) {
+    return res.redirect(302, "/");
+  }
+  const Authorization = `Basic ${Buffer.from(
+    `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
+  ).toString("base64")}`;
+  const request_auth = await fetch("https://huggingface.co/oauth/token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization,
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code: code,
+      redirect_uri: REDIRECT_URI,
+    }),
+  });
+  const response = await request_auth.json();
+  if (!response.access_token) {
+    return res.redirect(302, "/");
+  }
+  res.cookie("hf_token", response.access_token, {
+    httpOnly: false,
+    secure: true,
+    sameSite: "none",
+    maxAge: 30 * 24 * 60 * 60 * 1000,
+  });
+  return res.redirect(302, "/");
+});
+app.get("/auth/logout", (req, res) => {
+  res.clearCookie("hf_token", {
+    httpOnly: false,
+    secure: true,
+    sameSite: "none",
+  });
+  return res.redirect(302, "/");
+});
+app.get("/api/@me", checkUser, async (req, res) => {
+  const { hf_token } = req.cookies;
+  try {
+    const request_user = await fetch("https://huggingface.co/oauth/userinfo", {
+      headers: {
+        Authorization: `Bearer ${hf_token}`,
+      },
+    });
+    const user = await request_user.json();
+    res.send(user);
+  } catch (err) {
+    res.clearCookie("hf_token", {
+      httpOnly: false,
+      secure: true,
+      sameSite: "none",
+    });
+    res.status(401).send({
+      ok: false,
+      message: err.message,
+    });
+  }
+});
+app.post("/api/deploy", checkUser, async (req, res) => {
+  const { html, title, path } = req.body;
+  if (!html || !title) {
+    return res.status(400).send({
+      ok: false,
+      message: "Missing required fields",
+    });
+  }
+  const { hf_token } = req.cookies;
+  try {
+    const repo = {
+      type: "space",
+      name: path ?? "",
+    };
+    let readme;
+    let newHtml = html;
+    if (!path || path === "") {
+      const { name: username } = await whoAmI({ accessToken: hf_token });
+      const newTitle = title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .split("-")
+        .filter(Boolean)
+        .join("-")
+        .slice(0, 96);
+      const repoId = `${username}/${newTitle}`;
+      repo.name = repoId;
+      await createRepo({
+        repo,
+        accessToken: hf_token,
+      });
+      const colorFrom = COLORS[Math.floor(Math.random() * COLORS.length)];
+      const colorTo = COLORS[Math.floor(Math.random() * COLORS.length)];
+      readme = `---
+title: ${newTitle}
+emoji: 🐳
+colorFrom: ${colorFrom}
+colorTo: ${colorTo}
+sdk: static
+pinned: false
+tags:
+  - deepsite
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference`;
+    }
+    newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}</body>`);
+    const file = new Blob([newHtml], { type: "text/html" });
+    file.name = "index.html"; // Add name property to the Blob
+    const files = [file];
+    if (readme) {
+      const readmeFile = new Blob([readme], { type: "text/markdown" });
+      readmeFile.name = "README.md"; // Add name property to the Blob
+      files.push(readmeFile);
+    }
+    await uploadFiles({
+      repo,
+      files,
+      accessToken: hf_token,
+    });
+    return res.status(200).send({ ok: true, path: repo.name });
+  } catch (err) {
+    return res.status(500).send({
+      ok: false,
+      message: err.message,
+    });
+  }
+});
+app.post("/api/ask-ai", async (req, res) => {
+  const { prompt, html, previousPrompt, provider } = req.body;
+  if (!prompt) {
+    return res.status(400).send({
+      ok: false,
+      message: "Missing required fields",
+    });
+  }
+  const { hf_token } = req.cookies;
+  let token = hf_token;
+  const ip =
+    req.headers["x-forwarded-for"]?.split(",")[0].trim() ||
+    req.headers["x-real-ip"] ||
+    req.socket.remoteAddress ||
+    req.ip ||
+    "0.0.0.0";
+  if (!hf_token) {
+    ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
+    if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) {
+      return res.status(429).send({
+        ok: false,
+        openLogin: true,
+        message: "Log In to continue using the service",
+      });
+    }
+    token = process.env.DEFAULT_HF_TOKEN;
+  }
+  // Set up response headers for streaming
+  res.setHeader("Content-Type", "text/plain");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+  const client = new InferenceClient(token);
+  let completeResponse = "";
+  let TOKENS_USED = prompt?.length;
+  if (previousPrompt) TOKENS_USED += previousPrompt.length;
+  if (html) TOKENS_USED += html.length;
+  const DEFAULT_PROVIDER = PROVIDERS.novita;
+  // const selectedProvider =
+  //   provider === "auto"
+  //     ? TOKENS_USED < PROVIDERS.sambanova.max_tokens
+  //       ? PROVIDERS.sambanova
+  //       : DEFAULT_PROVIDER
+  //     : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
+  const selectedProvider =
+    provider === "auto"
+      ? DEFAULT_PROVIDER
+      : PROVIDERS[provider] ?? DEFAULT_PROVIDER;
+  if (provider !== "auto" && TOKENS_USED >= selectedProvider.max_tokens) {
+    return res.status(400).send({
+      ok: false,
+      openSelectProvider: true,
+      message: `Context is too long. ${selectedProvider.name} allow ${selectedProvider.max_tokens} max tokens.`,
+    });
+  }
+  try {
+    const chatCompletion = client.chatCompletionStream({
+      model: MODEL_ID,
+      provider: selectedProvider.id,
+      messages: [
+        {
+          role: "system",
+          content: `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`,
+        },
+        ...(previousPrompt
+          ? [
+              {
+                role: "user",
+                content: previousPrompt,
+              },
+            ]
+          : []),
+        ...(html
+          ? [
+              {
+                role: "assistant",
+                content: `The current code is: ${html}.`,
+              },
+            ]
+          : []),
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      ...(selectedProvider.id !== "sambanova"
+        ? {
+            max_tokens: selectedProvider.max_tokens,
+          }
+        : {}),
+    });
+    while (true) {
+      const { done, value } = await chatCompletion.next();
+      if (done) {
+        break;
+      }
+      const chunk = value.choices[0]?.delta?.content;
+      if (chunk) {
+        if (provider !== "sambanova") {
+          res.write(chunk);
+          completeResponse += chunk;
+          if (completeResponse.includes("</html>")) {
+            break;
+          }
+        } else {
+          let newChunk = chunk;
+          if (chunk.includes("</html>")) {
+            // Replace everything after the last </html> tag with an empty string
+            newChunk = newChunk.replace(/<\/html>[\s\S]*/, "</html>");
+          }
+          completeResponse += newChunk;
+          res.write(newChunk);
+          if (newChunk.includes("</html>")) {
+            break;
+          }
+        }
+      }
+    }
+    // End the response stream
+    res.end();
+  } catch (error) {
+    if (error.message.includes("exceeded your monthly included credits")) {
+      return res.status(402).send({
+        ok: false,
+        openProModal: true,
+        message: error.message,
+      });
+    }
+    if (!res.headersSent) {
+      res.status(500).send({
+        ok: false,
+        message:
+          error.message || "An error occurred while processing your request.",
+      });
+    } else {
+      // Otherwise end the stream
+      res.end();
+    }
+  }
+});
+app.get("/api/remix/:username/:repo", async (req, res) => {
+  const { username, repo } = req.params;
+  const { hf_token } = req.cookies;
+  const token = hf_token || process.env.DEFAULT_HF_TOKEN;
+  const repoId = `${username}/${repo}`;
+  const url = `https://huggingface.co/spaces/${repoId}/raw/main/index.html`;
+  try {
+    const space = await spaceInfo({
+      name: repoId,
+      accessToken: token,
+    });
+    if (!space || space.sdk !== "static" || space.private) {
+      return res.status(404).send({
+        ok: false,
+        message: "Space not found",
+      });
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+      return res.status(404).send({
+        ok: false,
+        message: "Space not found",
+      });
+    }
+    let html = await response.text();
+    // remove the last p tag including this url https://enzostvs-deepsite.hf.space
+    html = html.replace(getPTag(repoId), "");
+    res.status(200).send({
+      ok: true,
+      html,
+    });
+  } catch (error) {
+    return res.status(500).send({
+      ok: false,
+      message: error.message,
+    });
+  }
+});
+app.get("*", (_req, res) => {
+  res.sendFile(path.join(__dirname, "dist", "index.html"));
+});
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

src/assets/deepseek-color.svg ADDED Viewed

src/assets/index.css ADDED Viewed

	@@ -0,0 +1,9 @@

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

src/assets/logo.svg ADDED Viewed

src/assets/space.svg ADDED Viewed

src/assets/success.mp3 ADDED Viewed

Binary file (49.3 kB). View file

src/components/App.tsx ADDED Viewed

	@@ -0,0 +1,263 @@

+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";
+import LoadButton from "./load-button/load-button";
+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 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
+            );
+          }
+        }}
+      >
+        <div className="flex items-center justify-end gap-5">
+          <LoadButton auth={auth} setHtml={setHtml} />
+          <DeployButton html={html} error={error} auth={auth} />
+        </div>
+      </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}
+            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;

src/components/ask-ai/ask-ai.tsx ADDED Viewed

	@@ -0,0 +1,224 @@

+/* 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,
+}: {
+  html: string;
+  setHtml: (html: string) => void;
+  onScrollToBottom: () => void;
+  isAiWorking: boolean;
+  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 {
+      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;

src/components/deploy-button/deploy-button.tsx ADDED Viewed

	@@ -0,0 +1,208 @@

+/* 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";
+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,
+}: {
+  html: string;
+  error: boolean;
+  auth?: Auth;
+}) {
+  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,
+        }),
+        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="relative flex items-center justify-end">
+      {auth && (
+        <>
+          <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 || !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>
+  );
+}
+export default DeployButton;

src/components/header/header.tsx ADDED Viewed

	@@ -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;

src/components/load-button/load-button.tsx ADDED Viewed

	@@ -0,0 +1,125 @@

+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,
+}: {
+  auth?: Auth;
+  setHtml: (html: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [path, setPath] = useState<string | undefined>(undefined);
+  const loadSpace = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/remix/${path}`);
+      const data = await res.json();
+      if (res.ok) {
+        if (data.html) {
+          setHtml(data.html);
+          toast.success("Project loaded successfully.");
+        }
+        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 project
+      </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">
+            <label className="block">
+              <p className="text-gray-600 text-sm font-medium mb-1.5">
+                Space URL
+              </p>
+              <input
+                type="text"
+                value={path}
+                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) => setPath(e.target.value)}
+                onFocus={() => setError(false)}
+                onBlur={(e) => {
+                  const pathParts = e.target.value.split("/");
+                  setPath(
+                    `${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 || !path}
+                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 Project
+                {loading && <Loading />}
+              </button>
+            </div>
+          </main>
+        </>
+      </div>
+    </div>
+  );
+}
+export default LoadButton;

src/components/loading/loading.tsx ADDED Viewed

	@@ -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;

src/components/login/login.tsx ADDED Viewed

	@@ -0,0 +1,41 @@

+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 = () => {
+    if (html !== defaultHTML) {
+      setStorage(html);
+    }
+  };
+  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}
+        <a href="/api/login" 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"
+          />
+        </a>
+      </main>
+    </>
+  );
+}
+export default Login;

src/components/preview/preview.tsx ADDED Viewed

	@@ -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;

src/components/pro-modal/pro-modal.tsx ADDED Viewed

	@@ -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;

src/components/settings/settings.tsx ADDED Viewed

	@@ -0,0 +1,127 @@

+/* 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>
+            <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;

src/components/speech-prompt/speech-prompt.tsx ADDED Viewed

	@@ -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;

src/components/tabs/tabs.tsx ADDED Viewed

	@@ -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;

src/main.tsx ADDED Viewed

	@@ -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 />
+  </StrictMode>
+);

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src", "middleware", "utils/consts.ts", "utils/types.ts"]
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

utils/colors.js ADDED Viewed

	@@ -0,0 +1,9 @@

+export const COLORS = [
+  "red",
+  "blue",
+  "green",
+  "yellow",
+  "purple",
+  "pink",
+  "gray",
+];

utils/consts.ts ADDED Viewed

	@@ -0,0 +1,42 @@

+export const defaultHTML = `<!DOCTYPE html>
+<html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        height: 100dvh;
+        font-family: "Arial", sans-serif;
+        text-align: center;
+      }
+      .arrow {
+        position: absolute;
+        bottom: 32px;
+        left: 0px;
+        width: 100px;
+        transform: rotate(30deg);
+      }
+      h1 {
+        font-size: 50px;
+      }
+      h1 span {
+        color: #acacac;
+        font-size: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>
+      <span>I'm ready to work,</span><br />
+      Ask me anything.
+    </h1>
+    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
+    <script></script>
+  </body>
+</html>
+`;

utils/providers.js ADDED Viewed

	@@ -0,0 +1,27 @@

+export const PROVIDERS = {
+  "fireworks-ai": {
+    name: "Fireworks AI",
+    max_tokens: 131_000,
+    id: "fireworks-ai",
+  },
+  nebius: {
+    name: "Nebius AI Studio",
+    max_tokens: 131_000,
+    id: "nebius",
+  },
+  sambanova: {
+    name: "SambaNova",
+    max_tokens: 8_000,
+    id: "sambanova",
+  },
+  novita: {
+    name: "NovitaAI",
+    max_tokens: 16_000,
+    id: "novita",
+  },
+  // hyperbolic: {
+  //   name: "Hyperbolic",
+  //   max_tokens: 131_000,
+  //   id: "hyperbolic",
+  // },
+};

utils/types.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+export interface Auth {
+  preferred_username: string;
+  picture: string;
+  name: string;
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: [{ find: "@", replacement: "/src" }],
+  },
+});