deepsite

Running

App Files Files Community

enzostvs HF Staff commited on Mar 26

Commit

ea6c2a8

0 Parent(s):

Initial ✨

Browse files

Files changed (30) hide show

.env.example +5 -0
.gitignore +25 -0
Dockerfile +22 -0
README.md +12 -0
eslint.config.js +28 -0
index.html +27 -0
middlewares/checkUser.js +10 -0
package-lock.json +0 -0
package.json +46 -0
public/vite.svg +1 -0
server.js +250 -0
src/assets/deepseek-color.svg +1 -0
src/assets/index.css +9 -0
src/assets/space.svg +7 -0
src/components/App.tsx +157 -0
src/components/ask-ai/ask-ai.tsx +144 -0
src/components/deploy-button/deploy-button.tsx +171 -0
src/components/header/header.tsx +22 -0
src/components/loading/loading.tsx +28 -0
src/components/login/login.tsx +24 -0
src/components/settings/settings.tsx +38 -0
src/components/tabs/tabs.tsx +29 -0
src/main.tsx +12 -0
src/utils/consts.ts +24 -0
src/utils/types.ts +5 -0
src/vite-env.d.ts +1 -0
tsconfig.app.json +26 -0
tsconfig.json +13 -0
tsconfig.node.json +24 -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,25 @@

+# 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

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 3000
+# Start the application
+CMD ["npm", "start"]

README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+---
+title: Space Generator
+emoji: 🚀
+colorFrom: green
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+short_description: Develop and deploy your static space in few-seconds
+---
+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,27 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Space Generator</title>
+    <meta
+      name="description"
+      content="Code and Deploy your Hugging Face Static App in 1-Click 🚀"
+    />
+    <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();
+}

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,46 @@

+{
+  "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-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",
+    "@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/vite.svg ADDED Viewed

server.js ADDED Viewed

	@@ -0,0 +1,250 @@

+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import dotenv from "dotenv";
+import cookieParser from "cookie-parser";
+import { createRepo, uploadFile, whoAmI } from "@huggingface/hub";
+import { InferenceClient } from "@huggingface/inference";
+import bodyParser from "body-parser";
+import checkUser from "./middlewares/checkUser.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 = `http://localhost:${PORT}/auth/login`;
+const MODEL_ID = "deepseek-ai/DeepSeek-V3-0324";
+app.use(cookieParser());
+app.use(bodyParser.json());
+app.use(express.static(path.join(__dirname, "dist")));
+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%20read-repos%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: true,
+    maxAge: 30 * 24 * 60 * 60 * 1000,
+  });
+  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");
+    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 file = new Blob([html], { type: "text/html" });
+  file.name = "index.html"; // Add name property to the Blob
+  const { hf_token } = req.cookies;
+  try {
+    const repo = {
+      type: "space",
+      name: path ?? "",
+    };
+    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,
+      });
+    }
+    await uploadFile({
+      repo,
+      file,
+      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 } = 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) {
+    // Rate limit requests from the same IP address, to prevent abuse, free is limited to 2 requests per IP
+    ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1);
+    if (ipAddresses.get(ip) > 2) {
+      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 = "";
+  try {
+    const chatCompletion = client.chatCompletionStream({
+      model: MODEL_ID,
+      provider: "fireworks-ai",
+      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. Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE",
+        },
+        ...(html
+          ? [
+              {
+                role: "user",
+                content: `My current code is: ${html}.`,
+              },
+            ]
+          : []),
+        {
+          role: "user",
+          content: prompt,
+        },
+      ],
+      max_tokens: 12_000,
+    });
+    while (true) {
+      const { done, value } = await chatCompletion.next();
+      if (done) {
+        break;
+      }
+      const chunk = value.choices[0]?.delta?.content;
+      if (chunk) {
+        // Stream chunk to client
+        res.write(chunk);
+        completeResponse += chunk;
+        // Break when HTML is complete
+        if (completeResponse.includes("</html>")) {
+          break;
+        }
+      }
+    }
+    // End the response stream
+    res.end();
+  } catch (error) {
+    console.error("Error:", error);
+    // If we haven't sent a response yet, send an error
+    if (!res.headersSent) {
+      res.status(500).send({
+        ok: false,
+        message: "Error generating response",
+      });
+    } else {
+      // Otherwise end the stream
+      res.end();
+    }
+  }
+});
+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/space.svg ADDED Viewed

src/components/App.tsx ADDED Viewed

	@@ -0,0 +1,157 @@

+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useRef, useState } from "react";
+import Editor from "@monaco-editor/react";
+import classNames from "classnames";
+import { editor } from "monaco-editor";
+import { useMount, useUnmount } 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";
+function App() {
+  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(defaultHTML);
+  const [isAiWorking, setisAiWorking] = useState(false);
+  const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const fetchMe = async () => {
+    const res = await fetch("/api/@me");
+    if (res.ok) {
+      const data = await res.json();
+      setAuth(data);
+    } else {
+      setAuth(undefined);
+    }
+  };
+  const handleResize = (e: MouseEvent) => {
+    if (!editor.current || !preview.current || !resizer.current) return;
+    const editorWidth = e.clientX;
+    const previewWidth = window.innerWidth - editorWidth - 4;
+    editor.current.style.width = `${editorWidth}px`;
+    preview.current.style.width = `${previewWidth}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);
+  };
+  useMount(() => {
+    fetchMe();
+    if (!editor.current || !preview.current) return;
+    // Set initial sizes
+    const initialEditorWidth = window.innerWidth / 2;
+    const initialPreviewWidth = window.innerWidth - initialEditorWidth - 4;
+    editor.current.style.width = `${initialEditorWidth}px`;
+    preview.current.style.width = `${initialPreviewWidth}px`;
+    if (!resizer.current) return;
+    resizer.current.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("resize", () => handleMouseDown);
+  });
+  useUnmount(() => {
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", handleMouseUp);
+    if (resizer.current) {
+      resizer.current.removeEventListener("mousedown", handleMouseDown);
+    }
+    window.removeEventListener("resize", () => handleMouseDown);
+  });
+  return (
+    <div className="h-screen bg-gray-950 font-sans overflow-hidden">
+      <Header>
+        <DeployButton html={html} error={error} auth={auth} />
+      </Header>
+      <main className="lg:flex w-full hidden">
+        <div
+          ref={editor}
+          className="w-full h-full relative"
+          onClick={(e) => {
+            if (isAiWorking) {
+              e.preventDefault();
+              e.stopPropagation();
+              toast.warn("Please wait for the AI to finish working.");
+            }
+          }}
+        >
+          <Tabs>{/* <Settings /> */}</Tabs>
+          <Editor
+            language="html"
+            theme="vs-dark"
+            className={classNames("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)}
+          />
+          <AskAI
+            html={html}
+            setHtml={setHtml}
+            isAiWorking={isAiWorking}
+            setisAiWorking={setisAiWorking}
+            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-54px)]"
+        />
+        <div
+          ref={preview}
+          className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-54px)]"
+        >
+          <iframe
+            title="output"
+            className={classNames("w-full h-full select-none", {
+              "pointer-events-none": isResizing || isAiWorking,
+            })}
+            srcDoc={html}
+          />
+        </div>
+      </main>
+      <main className="lg:hidden p-5">
+        <p className="p-5 bg-red-500/10 text-red-500 rounded-md text-base text-pretty">
+          This app is not yet optimized for mobile. Please use a desktop browser
+          for the best experience.
+        </p>
+      </main>
+    </div>
+  );
+}
+export default App;

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

	@@ -0,0 +1,144 @@

+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 Login from "../login/login";
+import { defaultHTML } from "../../utils/consts";
+function AskAI({
+  html,
+  setHtml,
+  onScrollToBottom,
+  isAiWorking,
+  setisAiWorking,
+}: {
+  html: string;
+  setHtml: (html: string) => void;
+  onScrollToBottom: () => void;
+  isAiWorking: boolean;
+  setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [prompt, setPrompt] = useState("");
+  const callAi = async () => {
+    if (isAiWorking) return;
+    setisAiWorking(true);
+    let contentResponse = "";
+    try {
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          ...(html === defaultHTML ? {} : { html }),
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (request && request.body) {
+        if (!request.ok) {
+          const res = await request.json();
+          toast.error(res.message);
+          if (res.openLogin) {
+            setOpen(true);
+          }
+          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("");
+            setisAiWorking(false);
+            return;
+          }
+          const chunk = decoder.decode(value, { stream: true });
+          contentResponse += chunk;
+          const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
+          if (newHtml) {
+            setHtml(newHtml);
+            if (newHtml?.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.5 pl-4 pr-2.5 sticky bottom-4 left-4 w-[calc(100%-2rem)] z-10 group ${
+        isAiWorking ? "animate-pulse" : ""
+      }`}
+    >
+      <div className="w-full relative flex items-center justify-between">
+        <RiSparkling2Fill className="text-xl text-gray-500 group-focus-within:text-pink-500" />
+        <input
+          type="text"
+          disabled={isAiWorking}
+          className="w-full bg-transparent outline-none pl-3 text-white placeholder:text-gray-500 font-code"
+          placeholder="Ask AI anything..."
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              callAi();
+            }
+          }}
+        />
+        <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
+        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>
+          <p className="text-gray-500 text-sm mb-3">
+            You reached the limit of free AI usage. Please login to continue.
+          </p>
+        </Login>
+      </div>
+    </div>
+  );
+}
+export default AskAI;

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

	@@ -0,0 +1,171 @@

+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import classNames from "classnames";
+import { toast } from "react-toastify";
+import SpaceIcon from "@/assets/space.svg";
+import Loading from "../loading/loading";
+import Login from "../login/login";
+import { Auth } from "../../utils/types";
+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(
+          path ? `Space updated successfully!` : `Space created successfully!`
+        );
+        setPath(response.path);
+      } else {
+        toast.error(response.message);
+      }
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+  return (
+    <div className="relative max-lg:hidden flex items-center justify-end">
+      {auth && (
+        <p className="mr-3 text-sm text-gray-300">
+          Connected as{" "}
+          <a
+            href={`https://huggingface/${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-sm font-semibold 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 />
+        ) : (
+          <>
+            <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,22 @@

+import SpaceIcon from "@/assets/space.svg";
+import { ReactNode } from "react";
+function Header({ children }: { children?: ReactNode }) {
+  return (
+    <header className="border-b border-gray-900 px-6 py-2 flex justify-center md:justify-between items-center">
+      <div className="flex items-center justify-start gap-3">
+        <h1 className="text-white text-xl font-bold flex items-center justify-start">
+          <img src={SpaceIcon} alt="Space Icon" className="size-8 mr-2" />
+          Space Generator
+        </h1>
+        <p className="text-gray-700 max-md:hidden">|</p>
+        <p className="text-gray-500 text-sm max-md:hidden">
+          Code and Deploy in 1-Click
+        </p>
+      </div>
+      {children}
+    </header>
+  );
+}
+export default Header;

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,24 @@

+function Login({ children }: { children?: React.ReactNode }) {
+  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">
+          <img
+            src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-md-dark.svg"
+            alt="Sign in with Hugging Face"
+            className="mx-auto"
+          />
+        </a>
+      </main>
+    </>
+  );
+}
+export default Login;

src/components/settings/settings.tsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import { useState } from "react";
+import classNames from "classnames";
+import Login from "../login/login";
+function Settings() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        className="bg-gray-800/70 rounded-md text-xs text-gray-300 hover:brightness-125 px-3 py-1.5 font-medium cursor-pointer"
+        onClick={() => setOpen(!open)}
+      >
+        Settings
+      </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,
+          }
+        )}
+      >
+        <Login />
+      </div>
+    </div>
+  );
+}
+export default Settings;

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-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/utils/consts.ts ADDED Viewed

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

+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;
+        height: 100dvh;
+        font-family: "Arial", sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>
+      Start editing to see some magic happen!
+    </h1>
+    <script></script>
+  </body>
+</html>
+`;

src/utils/types.ts ADDED Viewed

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

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

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"]
+}

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"]
+}

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" }],
+  },
+});