Upload folder using huggingface_hub

.dockerignore

@@ -0,0 +1,21 @@
+# Exclude node_modules
+node_modules
+
+# Exclude logs
+*.log
+
+# Exclude temporary files
+*.tmp
+*.swp
+
+# Exclude build artifacts
+dist
+build
+
+# Exclude environment files
+.env
+.env.local
+
+# Exclude Docker-related files
+Dockerfile
+docker-compose.yml

.env.example

@@ -0,0 +1,11 @@
+
+# openai base url
+OPENAI_BASE_URL=https://xxxxxxx/v1
+# openai model
+OPENAI_MODEL=deepseek-v3
+#openai api key
+OPENAI_API_KEY=your_openai_api_key
+# PORT
+APP_PORT=5173
+
+

.gitignore

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

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

@@ -1,10 +1,145 @@
----
-title: Deepsitegroq
-emoji: 🏆
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+-
+
+# DeepSite 🚀
+
+DeepSite 是一个基于 React + TypeScript + Vite 构建的智能应用生成器，集成了 Monaco Editor 和 Groq，提供强大的代码编辑和 AI 辅助功能，现在支持构建全栈网站，并使用 Groq 的 `openai/gpt-oss-20b` 模型。
+
+## 技术栈 💻
+
+- **前端框架**: React 19
+- **开发语言**: TypeScript 5.7
+- **构建工具**: Vite 6
+- **UI 框架**: Tailwind CSS 4
+- **代码编辑器**: Monaco Editor
+- **AI 集成**: Groq API (使用 `openai/gpt-oss-20b` 模型)
+- **其他特性**:
+  - React Speech Recognition
+  - React Markdown
+  - React Toastify
+
+## 快速开始 🚀
+
+### 环境要求
+
+- Node.js >= 16
+- npm 或 yarn
+- Docker（可选，用于容器化部署）
+
+### 本地开发
+
+1. 克隆仓库：
+
+```bash
+git clone https://github.com/BF667/DeepSite-groq deepsite 
+cd deepsite
+```
+
+2. 安装依赖：
+
+```bash
+npm install
+```
+
+3. 配置环境变量：
+
+```bash
+cp .env.example .env
+# 编辑 .env 文件，填入必要的配置信息
+```
+
+4. 启动开发服务器：
+
+```bash
+npm run dev
+```
+
+5. 构建生产版本：
+
+```bash
+npm run build
+```
+
+## Docker 启动 🐳
+
+### 构建镜像
+
+```bash
+docker build -t my-deepsite .
+```
+
+### 启动容器
+
+```bash
+docker run -d -p 5173:5173 \
+
+  my-deepsite
+```
+
+### 使用示例
+
+如果您想使用不同的端口（例如 8080），可以这样配置：
+
+```bash
+docker run -d -p 8080:8080 \
+  -e APP_PORT=8080 \
+  -e GROQ_BASE_URL=https://api.groq.com/openai/v1/chat/completions \
+  -e GTOQ_API_KEY=ghp_xxxxxxxx \
+  -e GROQ_MODEL=openai/gpt-oss-20b \
+  my-deepsite
+```
+
+### 注意事项
+
+- 确保 Docker 已正确安装并运行。
+- 构建镜像前，确保当前目录包含有效的 Dockerfile。
+- 请替换 `sk-or-v1-xxxxx` 为您的实际 API 密钥。
+- 可根据需要调整端口映射和环境变量。
+
+## 环境变量可选参数 ⚙️
+
+- **`GROQ_BASE_URL`**: API 的基础 URL（必填）
+- **`GROQ_API_KEY`**: API 密钥（必填）
+- **`GROQ_MODEL`**: 模型名称（必填）
+- **`APP_PORT`**: 应用端口，默认为 `5173`（可选）
+
+## 项目结构 📁
+
+```
+deepsite/
+├── src/
+│   ├── components/     # React 组件
+│   ├── config/        # 配置文件
+│   ├── assets/        # 静态资源
+│   └── main.tsx       # 应用入口
+├── services/          # 后端服务
+├── middlewares/       # Express 中间件
+├── utils/            # 工具函数
+├── public/           # 公共资源
+└── dist/             # 构建输出目录
+```
+
+## 开发命令 ⌨️
+
+- `npm run dev` - 启动开发服务器
+- `npm run build` - 构建生产版本
+- `npm run preview` - 预览生产构建
+- `npm run lint` - 运行 ESLint 检查
+- `npm start` - 启动生产服务器
+
+## 环境变量配置 ⚙️
+
+在 `.env` 文件中配置以下环境变量：
+
+```env
+VITE_APP_TITLE=DeepSite
+GRPQ_API_KEY=your_api_key
+PORT=5173
+```
+
+## 贡献指南 🤝
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
+3. 提交更改 (`git commit -m 'Add some amazing feature'`)
+4. 推送到分支 (`git push origin feature/amazing-feature`)
+5. 创建 Pull Request

eslint.config.js

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

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

module.d.ts

@@ -0,0 +1 @@
+declare module "react-speech-recognition";

package.json

@@ -0,0 +1,45 @@
+{
+  "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": {
+    "@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",
+    "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"
+  }
+}

server.js

@@ -0,0 +1,46 @@
+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import dotenv from "dotenv";
+import bodyParser from "body-parser";
+
+import { createChatCompletion } from "./services/groq.js";
+
+// Load environment variables from .env file
+dotenv.config();
+
+const app = express();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PORT = process.env.APP_PORT || 5173;
+
+app.use(bodyParser.json());
+app.use(express.static(path.join(__dirname, "dist")));
+
+app.post("/api/ask-ai", async (req, res) => {
+  const { prompt, html, previousPrompt } = req.body;
+  if (!prompt) {
+    return res.status(400).send({
+      ok: false,
+      message: "Missing required fields",
+    });
+  }
+
+  // Set up response headers for streaming
+  res.setHeader("Content-Type", "text/plain");
+  res.setHeader("Cache-Control", "no-cache");
+  res.setHeader("Connection", "keep-alive");
+
+  // 始终使用 OpenAI
+  await createChatCompletion({ prompt, previousPrompt, html, res });
+});
+
+app.get("*", (_req, res) => {
+  res.sendFile(path.join(__dirname, "dist", "index.html"));
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

services/groq.js

@@ -0,0 +1,125 @@
+import Groq from "groq-sdk";
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
+
+// System prompt information
+const SYSTEM_PROMPT = `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 elaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE otherwise you can build full backend frontend typescript website if user want! If the user asks for a full-stack website, provide the necessary files (e.g., HTML, CSS, JavaScript, and backend code) in separate code blocks.`;
+
+/**
+ * Create chat messages array
+ * @param {string} prompt - User prompt
+ * @param {string} previousPrompt - Previous prompt (optional)
+ * @param {string} html - Current HTML code (optional)
+ * @returns {Array} Messages array
+ */
+const createChatMessages = (prompt, previousPrompt, html) => {
+  const messages = [
+    {
+      role: "system",
+      content: SYSTEM_PROMPT,
+    }
+  ];
+
+  if (previousPrompt) {
+    messages.push({
+      role: "user",
+      content: previousPrompt,
+    });
+  }
+
+  if (html) {
+    messages.push({
+      role: "assistant",
+      content: `The current code is: ${html}.`,
+    });
+  }
+
+  messages.push({
+    role: "user",
+    content: prompt,
+  });
+
+  return messages;
+};
+
+/**
+ * Handle stream response
+ * @param {Response} res - Express response object
+ * @param {AsyncGenerator} stream - Groq stream response
+ * @returns {Promise<void>}
+ */
+const handleStream = async (res, stream) => {
+  let completeResponse = "";
+  res.setHeader('Content-Type', 'text/html');
+  res.setHeader('Transfer-Encoding', 'chunked');
+
+  try {
+    for await (const chunk of stream) {
+      const content = chunk.choices[0]?.delta?.content;
+      if (content) {
+        res.write(content);
+        completeResponse += content;
+
+        if (completeResponse.includes("</html>")) {
+          break;
+        }
+      }
+    }
+    res.end();
+  } catch (error) {
+    console.error("Stream error:", error);
+    res.status(500).end("Error processing stream");
+  }
+};
+
+/**
+ * Generate HTML based on prompt
+ * @param {string} prompt - User prompt
+ * @param {string} previousPrompt - Previous prompt (optional)
+ * @param {string} html - Current HTML code (optional)
+ * @returns {AsyncGenerator} Stream response
+ */
+export const generateHTML = async (prompt, previousPrompt, html) => {
+  try {
+    const messages = createChatMessages(prompt, previousPrompt, html);
+    
+    const stream = await groq.chat.completions.create({
+      messages: messages,
+      "model": "openai/gpt-oss-20b",
+      "temperature": 1,
+      "max_completion_tokens": 8192,
+      "top_p": 1,
+      "stream": true,
+      "reasoning_effort": "medium",
+      "stop": null,
+      "tools": [
+        {
+          "type": "browser_search"
+        },
+        {
+          "type": "code_interpreter"
+        }
+      ]
+    });
+    
+    return stream;
+  } catch (error) {
+    console.error("API error:", error);
+    throw error;
+  }
+};
+
+// Example usage
+export const processPrompt = async (req, res) => {
+  try {
+    const { prompt, previousPrompt, html } = req.body;
+    const stream = await generateHTML(prompt, previousPrompt, html);
+    await handleStream(res, stream);
+  } catch (error) {
+    console.error("Processing error:", error);
+    res.status(500).json({ error: "Failed to process prompt" });
+  }
+};

src/assets/index.css

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

src/components/App.tsx

@@ -0,0 +1,244 @@
+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,
+} from "react-use";
+import { toast } from "react-toastify";
+
+import Header from "./header/header";
+import { defaultHTML } from "./../../utils/consts";
+import Tabs from "./tabs/tabs";
+import AskAI from "./ask-ai/ask-ai";
+import Preview from "./preview/preview";
+
+function App() {
+  const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
+
+  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 [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
+  const [isAiWorking, setisAiWorking] = useState(false);
+  const [currentView, setCurrentView] = useState<"editor" | "preview">(
+    "editor"
+  );
+
+  /**
+   * 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);
+  };
+
+  const handleDownloadHtml = () => {
+    if (html === defaultHTML) {
+      toast.info("Nothing to download yet.");
+      return;
+    }
+
+    try {
+      const blob = new Blob([html], { type: "text/html" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "index.html"; // Or a more dynamic name if needed
+      document.body.appendChild(a); // Append anchor to body
+      a.click(); // Simulate click to trigger download
+      document.body.removeChild(a); // Remove anchor from body
+      URL.revokeObjectURL(url); // Clean up the object URL
+      toast.success("HTML file download started.");
+    } catch (error) {
+      console.error("Error downloading HTML:", error);
+      toast.error("Failed to download HTML file.");
+    }
+  };
+
+  // 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(() => {
+    // 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);
+            removeHtmlStorage();
+            editorRef.current?.revealLine(
+              editorRef.current?.getModel()?.getLineCount() ?? 0
+            );
+          }
+        }}
+        onDownload={handleDownloadHtml}
+      >
+      </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

@@ -0,0 +1,172 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from "react";
+import { RiSparkling2Fill } from "react-icons/ri";
+import { GrSend } from "react-icons/gr";
+import { toast } from "react-toastify";
+import { MdPreview } from "react-icons/md";
+
+// import Login from "../login/login"; // 移除
+import { defaultHTML } from "./../../../utils/consts";
+import SuccessSound from "./../../assets/success.mp3";
+// 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 [openProModal, setOpenProModal] = useState(false); // 移除
+
+  const audio = new Audio(SuccessSound);
+  audio.volume = 0.5;
+
+  const callAi = async () => {
+    if (isAiWorking || !prompt.trim()) return;
+    setisAiWorking(true);
+
+    let contentResponse = "";
+    let lastRenderTime = 0;
+    try {
+      const request = await fetch("/api/ask-ai", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt,
+          ...(html === defaultHTML ? {} : { html }),
+          ...(previousPrompt ? { previousPrompt } : {}),
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (request && request.body) {
+        if (!request.ok) {
+          const res = await request.json();
+          // 移除与 openLogin 和 openProModal 相关的处理
+          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);
+      // 移除与 openLogin 相关的处理
+    }
+  };
+
+  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} /> */}
+          <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>
+      {/* 移除 Login 和 ProModal 的渲染 */}
+    </div>
+  );
+}
+
+export default AskAI;

src/components/header/header.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { MdRefresh } from "react-icons/md";
+import { FaDownload } from "react-icons/fa6";
+
+// import Logo from "@/assets/logo.svg";
+
+function Header({
+  onReset,
+  onDownload,
+  children,
+}: {
+  onReset: () => void;
+  onDownload: () => void;
+  children?: React.ReactNode;
+}) {
+  return (
+    <header className="flex h-[50px] lg:h-[54px] items-center justify-between px-3 lg:px-4 border-b border-gray-800 select-none">
+      <div className="flex items-center gap-2 lg:gap-3">
+        <img
+          src="/logo.svg"
+          alt="logo"
+          className="size-6 lg:size-7 filter invert"
+        />
+        <h1 className="text-white font-medium text-sm lg:text-base">
+          DeepSite
+        </h1>
+      </div>
+      <div className="flex items-center justify-end gap-2 lg:gap-3">
+        {children}
+        <button
+          title="Download HTML"
+          className="flex-none flex items-center justify-center text-gray-400 hover:text-white cursor-pointer transition-colors duration-100"
+          onClick={onDownload}
+        >
+          <FaDownload className="text-base lg:text-lg" />
+        </button>
+        <button
+          title="Reset Editor"
+          className="flex-none flex items-center justify-center text-gray-400 hover:text-red-500 cursor-pointer transition-colors duration-100"
+          onClick={onReset}
+        >
+          <MdRefresh className="text-lg lg:text-xl" />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

src/components/loading/loading.tsx

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

src/components/preview/preview.tsx

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

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

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

src/components/tabs/tabs.tsx

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

src/main.tsx

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

src/vite-env.d.ts

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

tsconfig.app.json

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

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

tsconfig.node.json

@@ -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/consts.ts

@@ -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/types.ts

@@ -0,0 +1,5 @@
+export interface Auth {
+  preferred_username: string;
+  picture: string;
+  name: string;
+}

vite.config.ts

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