diff --git a/.env.example b/.env.example new file mode 100644 index 0000000000000000000000000000000000000000..406c10849e0ff8b05e8dcd6de5a88e3ea33ea7e5 --- /dev/null +++ b/.env.example @@ -0,0 +1,11 @@ +OAUTH_CLIENT_ID= +OAUTH_CLIENT_SECRET= +APP_PORT=5173 +REDIRECT_URI=http://localhost:5173/auth/login +DEFAULT_HF_TOKEN= + +# Optional +# By setting this variable, you will bypass the login page + the free requests +# and will use the token directly. +# This is useful for testing purposes or local use. +HF_TOKEN= \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5ef6a520780202a1d6addd833d800ccb1ecac0bb..38d4117ba770f7518a4bc651b80446a4f2f218d6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,41 +1,26 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.* -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* - -# env files (can opt-in for committing if needed) -.env* - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts +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* diff --git a/Dockerfile b/Dockerfile index cbe0188aaee92186937765d2c85d76f7b212c537..8003b5cb2da5b411b794263c7d70bae1f6866ae0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,9 @@ -FROM node:20-alpine +# 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 @@ -13,7 +16,7 @@ RUN npm install RUN npm run build # Expose the application port (assuming your app runs on port 3000) -EXPOSE 3000 +EXPOSE 5173 # Start the application CMD ["npm", "start"] \ No newline at end of file diff --git a/README.md b/README.md index 5ab2231fc7dc96070548f1d03ab1d0f73a799600..606f2489d425f097ed31a2c0be520bff4b1c1201 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,19 @@ --- -title: DeepSite v2 +title: DeepSite emoji: 🐳 colorFrom: blue colorTo: blue sdk: docker pinned: true -app_port: 3000 +app_port: 5173 license: mit short_description: Generate any application with DeepSeek models: - deepseek-ai/DeepSeek-V3-0324 - - deepseek-ai/DeepSeek-R1-0528 --- # DeepSite 🐳 - DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity. ## How to use it locally - -Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74) +Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74) \ No newline at end of file diff --git a/abiba/index.html b/abiba/index.html new file mode 100644 index 0000000000000000000000000000000000000000..acd6d432e2637dd6aec079fde6625c2a934584c1 --- /dev/null +++ b/abiba/index.html @@ -0,0 +1,557 @@ + + + + + + Professeur ABIBA - Marabout Voyant Médium + + + + + + +
+
+
+
+ +
+

Professeur ABIBA

+
+ + + +
+ +
+
+ + + +
+ + +
+
+
+

+ Professeur ABIBA
+ Marabout Voyant Médium +

+

+ Découvrez les secrets de votre avenir et transformez votre vie grâce à mes dons exceptionnels de voyance et de médiumnité. +

+
+ + 06 04 04 79 80 + + + Contactez-moi + +
+
+ +
+
+
+
+
+ +

Je vois votre avenir

+
+
+
+
+
+
+
+ + +
+
+
+

Mes Services Spirituels

+
+

+ Avec plus de 25 ans d'expérience, je mets mes dons au service de votre bien-être et de votre épanouissement. +

+
+ +
+ +
+
+ +
+

Retour d'affection

+

+ Retrouvez l'amour perdu ou attirez la personne de vos rêves grâce à des rituels puissants et personnalisés. +

+
+ + +
+
+ +
+

Prospérité financière

+

+ Décuplez vos opportunités financières et brisez les blocages qui vous empêchent de réussir. +

+
+ + +
+
+ +
+

Protection spirituelle

+

+ Protégez-vous contre les énergies négatives, les mauvais sorts et les influences néfastes. +

+
+ + +
+
+ +
+

Réussite professionnelle

+

+ Obtenez la promotion que vous méritez ou trouvez le travail idéal grâce à des rituels ciblés. +

+
+ + +
+
+ +
+

Voyance précise

+

+ Des consultations de voyance détaillées pour éclairer votre chemin et prendre les bonnes décisions. +

+
+ + +
+
+ +
+

Résolution de conflits

+

+ Retrouvez l'harmonie dans vos relations familiales, amicales ou professionnelles. +

+
+
+
+
+ + +
+
+
+
+
+ Professeur ABIBA +
+

25+

+

Ans d'expérience

+
+
+
+ +
+

Qui est le Professeur ABIBA ?

+
+

+ Héritier d'une longue lignée de marabouts et de voyants, le Professeur ABIBA a développé dès son plus jeune âge des dons exceptionnels de médiumnité et de clairvoyance. +

+

+ Après des années d'études des sciences occultes en Afrique et en Europe, il a perfectionné ses techniques pour offrir à ses clients des solutions concrètes et efficaces à leurs problèmes. +

+

+ Sa réputation n'est plus à faire, avec des milliers de personnes aidées à travers le monde. Son approche unique combine tradition ancestrale et méthodes modernes pour des résultats rapides et durables. +

+ +
+
+
+ +
+

Consultations privées

+
+
+
+ +
+

Discret et professionnel

+
+
+
+ +
+

Résultats garantis

+
+
+
+ +
+

Suivi personnalisé

+
+
+ + + Prendre rendez-vous + +
+
+
+
+ + +
+
+
+

Témoignages

+
+

+ Découvrez ce que disent ceux qui ont fait confiance au Professeur ABIBA +

+
+ +
+ +
+
+
+ +
+
+

Sophie D.

+

Paris

+
+
+

+ "Après 3 ans de séparation, mon ex est revenu vers moi seulement 2 semaines après le rituel du Professeur ABIBA. Je n'en revenais pas ! Merci infiniment." +

+
+ + + + + +
+
+ + +
+
+
+ +
+
+

Marc L.

+

Lyon

+
+
+

+ "La consultation de voyance était d'une précision troublante. Tout ce qu'il a prédit s'est réalisé à la lettre. Je recommande à 100%." +

+
+ + + + + +
+
+ + +
+
+
+ +
+
+

Amélie T.

+

Marseille

+
+
+

+ "J'avais des problèmes financiers depuis des années. Après le travail du Professeur, j'ai décroché un meilleur emploi et mes dettes se sont résorbées comme par magie." +

+
+ + + + + +
+
+
+
+
+ + +
+
+
+

Contactez le Professeur ABIBA

+
+

+ Prenez rendez-vous pour une consultation privée et découvrez comment je peux vous aider. +

+
+ +
+
+
+

Informations de contact

+ +
+
+
+ +
+
+

Téléphone

+ 06 04 04 79 80 +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+

Consultations

+

En cabinet (Paris) ou à distance par téléphone

+
+
+ +
+
+ +
+
+

Horaires

+

Du lundi au samedi de 9h à 20h

+
+
+
+ +
+

Suivez-moi

+
+ + + + + + + + + +
+
+
+
+ +
+
+

Envoyez un message

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+
+ + + + + + + + + + + + diff --git a/app/(public)/layout.tsx b/app/(public)/layout.tsx deleted file mode 100644 index 4a4ec57d2609c783602beb6c06c8dca6a1e6192d..0000000000000000000000000000000000000000 --- a/app/(public)/layout.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Navigation from "@/components/public/navigation"; - -export default async function PublicLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( -
-
- - {children} -
- ); -} diff --git a/app/(public)/page.tsx b/app/(public)/page.tsx deleted file mode 100644 index c0849e72cf29027524ec9ebc3818e80a8aee5ef3..0000000000000000000000000000000000000000 --- a/app/(public)/page.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { AskAi } from "@/components/space/ask-ai"; -import { redirect } from "next/navigation"; -export default function Home() { - redirect("/projects/new"); - return ( - <> -
-
- ✨ DeepSite Public Beta -
-

- Code your website with AI in seconds -

-

- Vibe Coding has never been so easy. -

-
- -
-
-
-
-
-
-
-
-
-

- Community Driven -

-
-
-

- Deploy your website in seconds -

-
-
-

- Features that make you smile -

-
- - ); -} diff --git a/app/(public)/projects/page.tsx b/app/(public)/projects/page.tsx deleted file mode 100644 index 374dc6b1194256c5b142a62168ce0f414f6098be..0000000000000000000000000000000000000000 --- a/app/(public)/projects/page.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { redirect } from "next/navigation"; - -import { MyProjects } from "@/components/my-projects"; -import { getProjects } from "@/app/actions/projects"; - -export default async function ProjectsPage() { - const { ok, projects } = await getProjects(); - if (!ok) { - redirect("/"); - } - - return ; -} diff --git a/app/actions/auth.ts b/app/actions/auth.ts deleted file mode 100644 index a343e65e6726b35b32f022c117d3f3b5187d78e6..0000000000000000000000000000000000000000 --- a/app/actions/auth.ts +++ /dev/null @@ -1,18 +0,0 @@ -"use server"; - -import { headers } from "next/headers"; - -export async function getAuth() { - const authList = await headers(); - const host = authList.get("host") ?? "localhost:3000"; - const url = host.includes("/spaces/enzostvs") - ? "enzostvs-deepsite.hf.space" - : host; - const redirect_uri = - `${host.includes("localhost") ? "http://" : "https://"}` + - url + - "/auth/callback"; - - const loginRedirectUrl = `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`; - return loginRedirectUrl; -} diff --git a/app/actions/projects.ts b/app/actions/projects.ts deleted file mode 100644 index 209b16d9d9960eeafb9e0b02d7b1b3eda638338d..0000000000000000000000000000000000000000 --- a/app/actions/projects.ts +++ /dev/null @@ -1,63 +0,0 @@ -"use server"; - -import { isAuthenticated } from "@/lib/auth"; -import { NextResponse } from "next/server"; -import dbConnect from "@/lib/mongodb"; -import Project from "@/models/Project"; -import { Project as ProjectType } from "@/types"; - -export async function getProjects(): Promise<{ - ok: boolean; - projects: ProjectType[]; -}> { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return { - ok: false, - projects: [], - }; - } - - await dbConnect(); - const projects = await Project.find({ - user_id: user?.id, - }) - .sort({ _createdAt: -1 }) - .limit(100) - .lean(); - if (!projects) { - return { - ok: false, - projects: [], - }; - } - return { - ok: true, - projects: JSON.parse(JSON.stringify(projects)) as ProjectType[], - }; -} - -export async function getProject( - namespace: string, - repoId: string -): Promise { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return null; - } - - await dbConnect(); - const project = await Project.findOne({ - user_id: user.id, - namespace, - repoId, - }).lean(); - - if (!project) { - return null; - } - - return JSON.parse(JSON.stringify(project)) as ProjectType; -} diff --git a/app/api/ask-ai/route.ts b/app/api/ask-ai/route.ts deleted file mode 100644 index b75761907f563dbb2f4936c2ae2cbc944b2cb8cc..0000000000000000000000000000000000000000 --- a/app/api/ask-ai/route.ts +++ /dev/null @@ -1,410 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import type { NextRequest } from "next/server"; -import { NextResponse } from "next/server"; -import { headers } from "next/headers"; -import { InferenceClient } from "@huggingface/inference"; - -import { MODELS, PROVIDERS } from "@/lib/providers"; -import { - DIVIDER, - FOLLOW_UP_SYSTEM_PROMPT, - INITIAL_SYSTEM_PROMPT, - MAX_REQUESTS_PER_IP, - REPLACE_END, - SEARCH_START, -} from "@/lib/prompts"; -import MY_TOKEN_KEY from "@/lib/get-cookie-name"; - -const ipAddresses = new Map(); - -export async function POST(request: NextRequest) { - const authHeaders = await headers(); - const userToken = request.cookies.get(MY_TOKEN_KEY())?.value; - - const body = await request.json(); - const { prompt, provider, model, redesignMarkdown, html } = body; - - if (!model || (!prompt && !redesignMarkdown)) { - return NextResponse.json( - { ok: false, error: "Missing required fields" }, - { status: 400 } - ); - } - - const selectedModel = MODELS.find( - (m) => m.value === model || m.label === model - ); - if (!selectedModel) { - return NextResponse.json( - { ok: false, error: "Invalid model selected" }, - { status: 400 } - ); - } - - if (!selectedModel.providers.includes(provider) && provider !== "auto") { - return NextResponse.json( - { - ok: false, - error: `The selected model does not support the ${provider} provider.`, - openSelectProvider: true, - }, - { status: 400 } - ); - } - - let token = userToken; - let billTo: string | null = null; - - /** - * Handle local usage token, this bypass the need for a user token - * and allows local testing without authentication. - * This is useful for development and testing purposes. - */ - if (process.env.HF_TOKEN && process.env.HF_TOKEN.length > 0) { - token = process.env.HF_TOKEN; - } - - const ip = authHeaders.get("x-forwarded-for")?.includes(",") - ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim() - : authHeaders.get("x-forwarded-for"); - - if (!token) { - ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1); - if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) { - return NextResponse.json( - { - ok: false, - openLogin: true, - message: "Log In to continue using the service", - }, - { status: 429 } - ); - } - - token = process.env.DEFAULT_HF_TOKEN as string; - billTo = "huggingface"; - } - - const DEFAULT_PROVIDER = PROVIDERS.novita; - const selectedProvider = - provider === "auto" - ? PROVIDERS[selectedModel.autoProvider as keyof typeof PROVIDERS] - : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER; - - try { - // Create a stream response - const encoder = new TextEncoder(); - const stream = new TransformStream(); - const writer = stream.writable.getWriter(); - - // Start the response - const response = new NextResponse(stream.readable, { - headers: { - "Content-Type": "text/plain; charset=utf-8", - "Cache-Control": "no-cache", - Connection: "keep-alive", - }, - }); - - (async () => { - let completeResponse = ""; - try { - const client = new InferenceClient(token); - const chatCompletion = client.chatCompletionStream( - { - model: selectedModel.value, - provider: selectedProvider.id as any, - messages: [ - { - role: "system", - content: INITIAL_SYSTEM_PROMPT, - }, - { - role: "user", - content: redesignMarkdown - ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown.` - : html - ? `Here is my current HTML code:\n\n\`\`\`html\n${html}\n\`\`\`\n\nNow, please create a new design based on this HTML.` - : prompt, - }, - ], - max_tokens: selectedProvider.max_tokens, - }, - billTo ? { billTo } : {} - ); - - while (true) { - const { done, value } = await chatCompletion.next(); - if (done) { - break; - } - - const chunk = value.choices[0]?.delta?.content; - if (chunk) { - let newChunk = chunk; - if (!selectedModel?.isThinker) { - if (provider !== "sambanova") { - await writer.write(encoder.encode(chunk)); - completeResponse += chunk; - - if (completeResponse.includes("")) { - break; - } - } else { - if (chunk.includes("")) { - newChunk = newChunk.replace(/<\/html>[\s\S]*/, ""); - } - completeResponse += newChunk; - await writer.write(encoder.encode(newChunk)); - if (newChunk.includes("")) { - break; - } - } - } else { - const lastThinkTagIndex = - completeResponse.lastIndexOf(""); - completeResponse += newChunk; - await writer.write(encoder.encode(newChunk)); - if (lastThinkTagIndex !== -1) { - const afterLastThinkTag = completeResponse.slice( - lastThinkTagIndex + "".length - ); - if (afterLastThinkTag.includes("")) { - break; - } - } - } - } - } - } catch (error: any) { - if (error.message?.includes("exceeded your monthly included credits")) { - await writer.write( - encoder.encode( - JSON.stringify({ - ok: false, - openProModal: true, - message: error.message, - }) - ) - ); - } else { - await writer.write( - encoder.encode( - JSON.stringify({ - ok: false, - message: - error.message || - "An error occurred while processing your request.", - }) - ) - ); - } - } finally { - await writer?.close(); - } - })(); - - return response; - } catch (error: any) { - return NextResponse.json( - { - ok: false, - openSelectProvider: true, - message: - error?.message || "An error occurred while processing your request.", - }, - { status: 500 } - ); - } -} - -export async function PUT(request: NextRequest) { - const authHeaders = await headers(); - const userToken = request.cookies.get(MY_TOKEN_KEY())?.value; - - const body = await request.json(); - const { prompt, html, previousPrompt, provider, selectedElementHtml } = body; - - if (!prompt || !html) { - return NextResponse.json( - { ok: false, error: "Missing required fields" }, - { status: 400 } - ); - } - - const selectedModel = MODELS[0]; - - let token = userToken; - let billTo: string | null = null; - - /** - * Handle local usage token, this bypass the need for a user token - * and allows local testing without authentication. - * This is useful for development and testing purposes. - */ - if (process.env.HF_TOKEN && process.env.HF_TOKEN.length > 0) { - token = process.env.HF_TOKEN; - } - - const ip = authHeaders.get("x-forwarded-for")?.includes(",") - ? authHeaders.get("x-forwarded-for")?.split(",")[1].trim() - : authHeaders.get("x-forwarded-for"); - - if (!token) { - ipAddresses.set(ip, (ipAddresses.get(ip) || 0) + 1); - if (ipAddresses.get(ip) > MAX_REQUESTS_PER_IP) { - return NextResponse.json( - { - ok: false, - openLogin: true, - message: "Log In to continue using the service", - }, - { status: 429 } - ); - } - - token = process.env.DEFAULT_HF_TOKEN as string; - billTo = "huggingface"; - } - - const client = new InferenceClient(token); - - const DEFAULT_PROVIDER = PROVIDERS.novita; - const selectedProvider = - provider === "auto" - ? PROVIDERS[selectedModel.autoProvider as keyof typeof PROVIDERS] - : PROVIDERS[provider as keyof typeof PROVIDERS] ?? DEFAULT_PROVIDER; - - try { - const response = await client.chatCompletion( - { - model: selectedModel.value, - provider: selectedProvider.id as any, - messages: [ - { - role: "system", - content: FOLLOW_UP_SYSTEM_PROMPT, - }, - { - role: "user", - content: previousPrompt - ? previousPrompt - : "You are modifying the HTML file based on the user's request.", - }, - { - role: "assistant", - - content: `The current code is: \n\`\`\`html\n${html}\n\`\`\` ${ - selectedElementHtml - ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\`` - : "" - }`, - }, - { - role: "user", - content: prompt, - }, - ], - ...(selectedProvider.id !== "sambanova" - ? { - max_tokens: selectedProvider.max_tokens, - } - : {}), - }, - billTo ? { billTo } : {} - ); - - const chunk = response.choices[0]?.message?.content; - if (!chunk) { - return NextResponse.json( - { ok: false, message: "No content returned from the model" }, - { status: 400 } - ); - } - - if (chunk) { - const updatedLines: number[][] = []; - let newHtml = html; - let position = 0; - let moreBlocks = true; - - while (moreBlocks) { - const searchStartIndex = chunk.indexOf(SEARCH_START, position); - if (searchStartIndex === -1) { - moreBlocks = false; - continue; - } - - const dividerIndex = chunk.indexOf(DIVIDER, searchStartIndex); - if (dividerIndex === -1) { - moreBlocks = false; - continue; - } - - const replaceEndIndex = chunk.indexOf(REPLACE_END, dividerIndex); - if (replaceEndIndex === -1) { - moreBlocks = false; - continue; - } - - const searchBlock = chunk.substring( - searchStartIndex + SEARCH_START.length, - dividerIndex - ); - const replaceBlock = chunk.substring( - dividerIndex + DIVIDER.length, - replaceEndIndex - ); - - if (searchBlock.trim() === "") { - newHtml = `${replaceBlock}\n${newHtml}`; - updatedLines.push([1, replaceBlock.split("\n").length]); - } else { - const blockPosition = newHtml.indexOf(searchBlock); - if (blockPosition !== -1) { - const beforeText = newHtml.substring(0, blockPosition); - const startLineNumber = beforeText.split("\n").length; - const replaceLines = replaceBlock.split("\n").length; - const endLineNumber = startLineNumber + replaceLines - 1; - - updatedLines.push([startLineNumber, endLineNumber]); - newHtml = newHtml.replace(searchBlock, replaceBlock); - } - } - - position = replaceEndIndex + REPLACE_END.length; - } - - return NextResponse.json({ - ok: true, - html: newHtml, - updatedLines, - }); - } else { - return NextResponse.json( - { ok: false, message: "No content returned from the model" }, - { status: 400 } - ); - } - } catch (error: any) { - if (error.message?.includes("exceeded your monthly included credits")) { - return NextResponse.json( - { - ok: false, - openProModal: true, - message: error.message, - }, - { status: 402 } - ); - } - return NextResponse.json( - { - ok: false, - openSelectProvider: true, - message: - error.message || "An error occurred while processing your request.", - }, - { status: 500 } - ); - } -} diff --git a/app/api/auth/route.ts b/app/api/auth/route.ts deleted file mode 100644 index 221e0c266bd2e6673779b9e81caf333243147f60..0000000000000000000000000000000000000000 --- a/app/api/auth/route.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { NextRequest, NextResponse } from "next/server"; - -export async function POST(req: NextRequest) { - const body = await req.json(); - const { code } = body; - - if (!code) { - return NextResponse.json( - { error: "Code is required" }, - { - status: 400, - headers: { - "Content-Type": "application/json", - }, - } - ); - } - - const Authorization = `Basic ${Buffer.from( - `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}` - ).toString("base64")}`; - - const host = - req.headers.get("host") ?? req.headers.get("origin") ?? "localhost:3000"; - - const url = host.includes("/spaces/enzostvs") - ? "enzostvs-deepsite.hf.space" - : host; - const redirect_uri = - `${host.includes("localhost") ? "http://" : "https://"}` + - url + - "/auth/callback"; - 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, - redirect_uri, - }), - }); - - const response = await request_auth.json(); - if (!response.access_token) { - return NextResponse.json( - { error: "Failed to retrieve access token" }, - { - status: 400, - headers: { - "Content-Type": "application/json", - }, - } - ); - } - - const userResponse = await fetch("https://huggingface.co/api/whoami-v2", { - headers: { - Authorization: `Bearer ${response.access_token}`, - }, - }); - - if (!userResponse.ok) { - return NextResponse.json( - { user: null, errCode: userResponse.status }, - { status: userResponse.status } - ); - } - const user = await userResponse.json(); - - return NextResponse.json( - { - access_token: response.access_token, - expires_in: response.expires_in, - user, - }, - { - status: 200, - headers: { - "Content-Type": "application/json", - }, - } - ); -} diff --git a/app/api/me/projects/[namespace]/[repoId]/route.ts b/app/api/me/projects/[namespace]/[repoId]/route.ts deleted file mode 100644 index 5b5bb19a9fe7a91d48b8b8cbcf340f1508032baf..0000000000000000000000000000000000000000 --- a/app/api/me/projects/[namespace]/[repoId]/route.ts +++ /dev/null @@ -1,237 +0,0 @@ -import { NextRequest, NextResponse } from "next/server"; -import { RepoDesignation, spaceInfo, uploadFile } from "@huggingface/hub"; - -import { isAuthenticated } from "@/lib/auth"; -import Project from "@/models/Project"; -import dbConnect from "@/lib/mongodb"; -import { getPTag } from "@/lib/utils"; - -export async function GET( - req: NextRequest, - { params }: { params: Promise<{ namespace: string; repoId: string }> } -) { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return NextResponse.json({ message: "Unauthorized" }, { status: 401 }); - } - - await dbConnect(); - const param = await params; - const { namespace, repoId } = param; - - const project = await Project.findOne({ - user_id: user.id, - space_id: `${namespace}/${repoId}`, - }).lean(); - if (!project) { - return NextResponse.json( - { - ok: false, - error: "Project not found", - }, - { status: 404 } - ); - } - const space_url = `https://huggingface.co/spaces/${namespace}/${repoId}/raw/main/index.html`; - try { - const space = await spaceInfo({ - name: namespace + "/" + repoId, - accessToken: user.token as string, - additionalFields: ["author"], - }); - - if (!space || space.sdk !== "static") { - return NextResponse.json( - { - ok: false, - error: "Space is not a static space", - }, - { status: 404 } - ); - } - if (space.author !== user.name) { - return NextResponse.json( - { - ok: false, - error: "Space does not belong to the authenticated user", - }, - { status: 403 } - ); - } - - const response = await fetch(space_url); - if (!response.ok) { - return NextResponse.json( - { - ok: false, - error: "Failed to fetch space HTML", - }, - { status: 404 } - ); - } - let html = await response.text(); - // remove the last p tag including this url https://enzostvs-deepsite.hf.space - html = html.replace(getPTag(namespace + "/" + repoId), ""); - - return NextResponse.json( - { - project: { - ...project, - html, - }, - ok: true, - }, - { status: 200 } - ); - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.statusCode === 404) { - await Project.deleteOne({ - user_id: user.id, - space_id: `${namespace}/${repoId}`, - }); - return NextResponse.json( - { error: "Space not found", ok: false }, - { status: 404 } - ); - } - return NextResponse.json( - { error: error.message, ok: false }, - { status: 500 } - ); - } -} - -export async function PUT( - req: NextRequest, - { params }: { params: Promise<{ namespace: string; repoId: string }> } -) { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return NextResponse.json({ message: "Unauthorized" }, { status: 401 }); - } - - await dbConnect(); - const param = await params; - const { namespace, repoId } = param; - const { html, prompts } = await req.json(); - - const project = await Project.findOne({ - user_id: user.id, - space_id: `${namespace}/${repoId}`, - }).lean(); - if (!project) { - return NextResponse.json( - { - ok: false, - error: "Project not found", - }, - { status: 404 } - ); - } - - const repo: RepoDesignation = { - type: "space", - name: `${namespace}/${repoId}`, - }; - - const newHtml = html.replace(/<\/body>/, `${getPTag(repo.name)}`); - const file = new File([newHtml], "index.html", { type: "text/html" }); - await uploadFile({ - repo, - file, - accessToken: user.token as string, - commitTitle: `${prompts[prompts.length - 1]} - Follow Up Deployment`, - }); - - await Project.updateOne( - { user_id: user.id, space_id: `${namespace}/${repoId}` }, - { - $set: { - prompts: [ - ...(project && "prompts" in project ? project.prompts : []), - ...prompts, - ], - }, - } - ); - return NextResponse.json({ ok: true }, { status: 200 }); -} - -export async function POST( - req: NextRequest, - { params }: { params: Promise<{ namespace: string; repoId: string }> } -) { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return NextResponse.json({ message: "Unauthorized" }, { status: 401 }); - } - - await dbConnect(); - const param = await params; - const { namespace, repoId } = param; - - const space = await spaceInfo({ - name: namespace + "/" + repoId, - accessToken: user.token as string, - additionalFields: ["author"], - }); - - if (!space || space.sdk !== "static") { - return NextResponse.json( - { - ok: false, - error: "Space is not a static space", - }, - { status: 404 } - ); - } - if (space.author !== user.name) { - return NextResponse.json( - { - ok: false, - error: "Space does not belong to the authenticated user", - }, - { status: 403 } - ); - } - - const project = await Project.findOne({ - user_id: user.id, - space_id: `${namespace}/${repoId}`, - }).lean(); - if (project) { - // redirect to the project page if it already exists - return NextResponse.json( - { - ok: false, - error: "Project already exists", - redirect: `/projects/${namespace}/${repoId}`, - }, - { status: 400 } - ); - } - - const newProject = new Project({ - user_id: user.id, - space_id: `${namespace}/${repoId}`, - prompts: [], - }); - - await newProject.save(); - return NextResponse.json( - { - ok: true, - project: { - id: newProject._id, - space_id: newProject.space_id, - prompts: newProject.prompts, - }, - }, - { status: 201 } - ); -} diff --git a/app/api/me/projects/route.ts b/app/api/me/projects/route.ts deleted file mode 100644 index 9899bc2533a40a28b9e35cfe123b9868c318e19d..0000000000000000000000000000000000000000 --- a/app/api/me/projects/route.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { NextRequest, NextResponse } from "next/server"; -import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub"; - -import { isAuthenticated } from "@/lib/auth"; -import Project from "@/models/Project"; -import dbConnect from "@/lib/mongodb"; -import { COLORS, getPTag } from "@/lib/utils"; -// import type user -export async function GET() { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return NextResponse.json({ message: "Unauthorized" }, { status: 401 }); - } - - await dbConnect(); - - const projects = await Project.find({ - user_id: user?.id, - }) - .sort({ _createdAt: -1 }) - .limit(100) - .lean(); - if (!projects) { - return NextResponse.json( - { - ok: false, - projects: [], - }, - { status: 404 } - ); - } - return NextResponse.json( - { - ok: true, - projects, - }, - { status: 200 } - ); -} - -/** - * This API route creates a new project in Hugging Face Spaces. - * It requires an Authorization header with a valid token and a JSON body with the project details. - */ -export async function POST(request: NextRequest) { - const user = await isAuthenticated(); - - if (user instanceof NextResponse || !user) { - return NextResponse.json({ message: "Unauthorized" }, { status: 401 }); - } - - const { title, html, prompts } = await request.json(); - - if (!title || !html) { - return NextResponse.json( - { message: "Title and HTML content are required.", ok: false }, - { status: 400 } - ); - } - - await dbConnect(); - - try { - let readme = ""; - let newHtml = html; - - const newTitle = title - .toLowerCase() - .replace(/[^a-z0-9]+/g, "-") - .split("-") - .filter(Boolean) - .join("-") - .slice(0, 96); - - const repo: RepoDesignation = { - type: "space", - name: `${user.name}/${newTitle}`, - }; - - const { repoUrl } = await createRepo({ - repo, - accessToken: user.token as string, - }); - 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)}`); - const file = new File([newHtml], "index.html", { type: "text/html" }); - const readmeFile = new File([readme], "README.md", { - type: "text/markdown", - }); - const files = [file, readmeFile]; - await uploadFiles({ - repo, - files, - accessToken: user.token as string, - commitTitle: `${prompts[prompts.length - 1]} - Initial Deployment`, - }); - const path = repoUrl.split("/").slice(-2).join("/"); - const project = await Project.create({ - user_id: user.id, - space_id: path, - prompts, - }); - return NextResponse.json({ project, path, ok: true }, { status: 201 }); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (err: any) { - return NextResponse.json( - { error: err.message, ok: false }, - { status: 500 } - ); - } -} diff --git a/app/api/me/route.ts b/app/api/me/route.ts deleted file mode 100644 index c4164daba5c58bb2fe7f4f7508de7165f32ca443..0000000000000000000000000000000000000000 --- a/app/api/me/route.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { headers } from "next/headers"; -import { NextResponse } from "next/server"; - -export async function GET() { - const authHeaders = await headers(); - const token = authHeaders.get("Authorization"); - if (!token) { - return NextResponse.json({ user: null, errCode: 401 }, { status: 401 }); - } - - const userResponse = await fetch("https://huggingface.co/api/whoami-v2", { - headers: { - Authorization: `${token}`, - }, - }); - - if (!userResponse.ok) { - return NextResponse.json( - { user: null, errCode: userResponse.status }, - { status: userResponse.status } - ); - } - const user = await userResponse.json(); - return NextResponse.json({ user, errCode: null }, { status: 200 }); -} diff --git a/app/api/re-design/route.ts b/app/api/re-design/route.ts deleted file mode 100644 index 777c2cbd18f95592080c0fe1ad2cab23a5264397..0000000000000000000000000000000000000000 --- a/app/api/re-design/route.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { NextRequest, NextResponse } from "next/server"; - -export async function PUT(request: NextRequest) { - const body = await request.json(); - const { url } = body; - - if (!url) { - return NextResponse.json({ error: "URL is required" }, { status: 400 }); - } - - try { - const response = await fetch( - `https://r.jina.ai/${encodeURIComponent(url)}`, - { - method: "POST", - } - ); - if (!response.ok) { - return NextResponse.json( - { error: "Failed to fetch redesign" }, - { status: 500 } - ); - } - const markdown = await response.text(); - return NextResponse.json( - { - ok: true, - markdown, - }, - { status: 200 } - ); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - return NextResponse.json( - { error: error.message || "An error occurred" }, - { status: 500 } - ); - } -} diff --git a/app/auth/callback/page.tsx b/app/auth/callback/page.tsx deleted file mode 100644 index ac44f365b707908d6003a4266db1269d297a4336..0000000000000000000000000000000000000000 --- a/app/auth/callback/page.tsx +++ /dev/null @@ -1,72 +0,0 @@ -"use client"; -import Link from "next/link"; -import { useUser } from "@/hooks/useUser"; -import { use, useState } from "react"; -import { useMount, useTimeoutFn } from "react-use"; - -import { Button } from "@/components/ui/button"; -export default function AuthCallback({ - searchParams, -}: { - searchParams: Promise<{ code: string }>; -}) { - const [showButton, setShowButton] = useState(false); - const { code } = use(searchParams); - const { loginFromCode } = useUser(); - - useMount(async () => { - if (code) { - await loginFromCode(code); - } - }); - - useTimeoutFn( - () => setShowButton(true), - 7000 // Show button after 5 seconds - ); - - return ( -
-
-
-
-
- 🚀 -
-
- 👋 -
-
- 🙌 -
-
-

- Login In Progress... -

-

- Wait a moment while we log you in with your code. -

-
-
-
-

- If you are not redirected automatically in the next 5 seconds, - please click the button below -

- {showButton ? ( - - - - ) : ( -

- Please wait, we are logging you in... -

- )} -
-
-
-
- ); -} diff --git a/app/auth/page.tsx b/app/auth/page.tsx deleted file mode 100644 index a45a6bc6f58907b4ee5efbf0f70a51ee153625c7..0000000000000000000000000000000000000000 --- a/app/auth/page.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { redirect } from "next/navigation"; -import { Metadata } from "next"; - -import { getAuth } from "@/app/actions/auth"; - -export const revalidate = 1; - -export const metadata: Metadata = { - robots: "noindex, nofollow", -}; - -export default async function Auth() { - const loginRedirectUrl = await getAuth(); - if (loginRedirectUrl) { - redirect(loginRedirectUrl); - } - - return ( -
-
-

Error

-

- An error occurred while trying to log in. Please try again later. -

-
-
- ); -} diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/layout.tsx b/app/layout.tsx deleted file mode 100644 index 09fe16906a16a6a8bff4a21d55004968eff2b163..0000000000000000000000000000000000000000 --- a/app/layout.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import type { Metadata, Viewport } from "next"; -import { Inter, PT_Sans } from "next/font/google"; -import { cookies } from "next/headers"; - -import TanstackProvider from "@/components/providers/tanstack-query-provider"; -import "@/assets/globals.css"; -import { Toaster } from "@/components/ui/sonner"; -import MY_TOKEN_KEY from "@/lib/get-cookie-name"; -import { apiServer } from "@/lib/api"; -import AppContext from "@/components/contexts/app-context"; -import Script from "next/script"; - -const inter = Inter({ - variable: "--font-inter-sans", - subsets: ["latin"], -}); - -const ptSans = PT_Sans({ - variable: "--font-ptSans-mono", - subsets: ["latin"], - weight: ["400", "700"], -}); - -export const metadata: Metadata = { - title: "DeepSite | Build with AI ✨", - description: - "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.", - openGraph: { - title: "DeepSite | Build with AI ✨", - description: - "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.", - url: "https://deepsite.hf.co", - siteName: "DeepSite", - images: [ - { - url: "https://deepsite.hf.co/banner.png", - width: 1200, - height: 630, - alt: "DeepSite Open Graph Image", - }, - ], - }, - twitter: { - card: "summary_large_image", - title: "DeepSite | Build with AI ✨", - description: - "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.", - images: ["https://deepsite.hf.co/banner.png"], - }, - appleWebApp: { - capable: true, - title: "DeepSite", - statusBarStyle: "black-translucent", - }, - icons: { - icon: "/logo.svg", - shortcut: "/logo.svg", - apple: "/logo.svg", - }, -}; - -export const viewport: Viewport = { - initialScale: 1, - maximumScale: 1, - themeColor: "#000000", -}; - -async function getMe() { - const cookieStore = await cookies(); - const token = cookieStore.get(MY_TOKEN_KEY())?.value; - if (!token) return { user: null, errCode: null }; - try { - const res = await apiServer.get("/me", { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - return { user: res.data.user, errCode: null }; - } catch (err: any) { - return { user: null, errCode: err.status }; - } -} - -export default async function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - const data = await getMe(); - return ( - - - - - - {children} - - - - ); -} diff --git a/app/projects/[namespace]/[repoId]/page.tsx b/app/projects/[namespace]/[repoId]/page.tsx deleted file mode 100644 index aa7e27c07454d6f38be25e72782634b74e0411d7..0000000000000000000000000000000000000000 --- a/app/projects/[namespace]/[repoId]/page.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { cookies } from "next/headers"; -import { redirect } from "next/navigation"; - -import { apiServer } from "@/lib/api"; -import MY_TOKEN_KEY from "@/lib/get-cookie-name"; -import { AppEditor } from "@/components/editor"; - -async function getProject(namespace: string, repoId: string) { - // TODO replace with a server action - const cookieStore = await cookies(); - const token = cookieStore.get(MY_TOKEN_KEY())?.value; - if (!token) return {}; - try { - const { data } = await apiServer.get( - `/me/projects/${namespace}/${repoId}`, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - - return data.project; - } catch { - return {}; - } -} - -export default async function ProjectNamespacePage({ - params, -}: { - params: Promise<{ namespace: string; repoId: string }>; -}) { - const { namespace, repoId } = await params; - const project = await getProject(namespace, repoId); - if (!project?.html) { - redirect("/projects"); - } - return ; -} diff --git a/app/projects/new/page.tsx b/app/projects/new/page.tsx deleted file mode 100644 index e47a4375504e549ef3e3f167df8e6f25976a3d35..0000000000000000000000000000000000000000 --- a/app/projects/new/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { AppEditor } from "@/components/editor"; - -export default function ProjectsNewPage() { - return ; -} diff --git a/assets/globals.css b/assets/globals.css deleted file mode 100644 index 19dd59e7dcc34e453e9850a052ae8f039628e58a..0000000000000000000000000000000000000000 --- a/assets/globals.css +++ /dev/null @@ -1,146 +0,0 @@ -@import "tailwindcss"; -@import "tw-animate-css"; - -@custom-variant dark (&:is(.dark *)); - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-inter-sans); - --font-mono: var(--font-ptSans-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); - --color-card: var(--card); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); -} - -:root { - --radius: 0.625rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); -} - -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.556 0 0); -} - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } - html { - @apply scroll-smooth; - } -} - -.background__noisy { - @apply bg-blend-normal pointer-events-none opacity-90; - background-size: 25ww auto; - background-image: url("/background_noisy.webp"); - @apply fixed w-screen h-screen -z-1 top-0 left-0; -} - -.monaco-editor .margin { - @apply !bg-neutral-900; -} -.monaco-editor .monaco-editor-background { - @apply !bg-neutral-900; -} -.monaco-editor .line-numbers { - @apply !text-neutral-500; -} - -.matched-line { - @apply bg-sky-500/30; -} diff --git a/assets/logo.svg b/assets/logo.svg deleted file mode 100644 index e69f057d4d4c256f02881888e781aa0943010c3e..0000000000000000000000000000000000000000 --- a/assets/logo.svg +++ /dev/null @@ -1,316 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/components.json b/components.json deleted file mode 100644 index 335484f9424bf72b98e3b892275740bc8f014754..0000000000000000000000000000000000000000 --- a/components.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://ui.shadcn.com/schema.json", - "style": "new-york", - "rsc": true, - "tsx": true, - "tailwind": { - "config": "", - "css": "app/globals.css", - "baseColor": "neutral", - "cssVariables": true, - "prefix": "" - }, - "aliases": { - "components": "@/components", - "utils": "@/lib/utils", - "ui": "@/components/ui", - "lib": "@/lib", - "hooks": "@/hooks" - }, - "iconLibrary": "lucide" -} \ No newline at end of file diff --git a/components/contexts/app-context.tsx b/components/contexts/app-context.tsx deleted file mode 100644 index a97820d9e26fa6197ef583ce88aba66a3bc10082..0000000000000000000000000000000000000000 --- a/components/contexts/app-context.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -"use client"; - -import { useUser } from "@/hooks/useUser"; -import { usePathname, useRouter } from "next/navigation"; -import { useMount } from "react-use"; -import { UserContext } from "@/components/contexts/user-context"; -import { User } from "@/types"; -import { toast } from "sonner"; -import { useBroadcastChannel } from "@/lib/useBroadcastChannel"; - -export default function AppContext({ - children, - me: initialData, -}: { - children: React.ReactNode; - me?: { - user: User | null; - errCode: number | null; - }; -}) { - const { loginFromCode, user, logout, loading, errCode } = - useUser(initialData); - const pathname = usePathname(); - const router = useRouter(); - - useMount(() => { - if (!initialData?.user && !user) { - if ([401, 403].includes(errCode as number)) { - logout(); - } else if (pathname.includes("/spaces")) { - if (errCode) { - toast.error("An error occured while trying to log in"); - } - // If we did not manage to log in (probs because api is down), we simply redirect to the home page - router.push("/"); - } - } - }); - - const events: any = {}; - - useBroadcastChannel("auth", (message) => { - if (pathname.includes("/auth/callback")) return; - - if (!message.code) return; - if (message.type === "user-oauth" && message?.code && !events.code) { - loginFromCode(message.code); - } - }); - - return ( - - {children} - - ); -} diff --git a/components/contexts/user-context.tsx b/components/contexts/user-context.tsx deleted file mode 100644 index 8a3391744618bfcfc979401cdee76051c70fee8f..0000000000000000000000000000000000000000 --- a/components/contexts/user-context.tsx +++ /dev/null @@ -1,8 +0,0 @@ -"use client"; - -import { createContext } from "react"; -import { User } from "@/types"; - -export const UserContext = createContext({ - user: undefined as User | undefined, -}); diff --git a/components/editor/ask-ai/follow-up-tooltip.tsx b/components/editor/ask-ai/follow-up-tooltip.tsx deleted file mode 100644 index 5ebb4a29de5de5cca175eb6795f1d069be6ba02b..0000000000000000000000000000000000000000 --- a/components/editor/ask-ai/follow-up-tooltip.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { Info } from "lucide-react"; - -export const FollowUpTooltip = () => { - return ( - - - - - -
-

- ⚡ Faster, Smarter Updates -

-
-
-

- Using the Diff-Patch system, allow DeepSite to intelligently update - your project without rewritting the entire codebase. -

-

- This means faster updates, less data usage, and a more efficient - development process. -

-
- - - ); -}; diff --git a/components/editor/ask-ai/index.tsx b/components/editor/ask-ai/index.tsx deleted file mode 100644 index c66b54ac6f0d6973ef4c21d996a2b197c85a9faf..0000000000000000000000000000000000000000 --- a/components/editor/ask-ai/index.tsx +++ /dev/null @@ -1,465 +0,0 @@ -"use client"; -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState, useRef, useMemo } from "react"; -import classNames from "classnames"; -import { toast } from "sonner"; -import { useLocalStorage, useUpdateEffect } from "react-use"; -import { ArrowUp, ChevronDown, Crosshair } from "lucide-react"; -import { FaStopCircle } from "react-icons/fa"; - -import ProModal from "@/components/pro-modal"; -import { Button } from "@/components/ui/button"; -import { MODELS } from "@/lib/providers"; -import { HtmlHistory } from "@/types"; -import { InviteFriends } from "@/components/invite-friends"; -import { Settings } from "@/components/editor/ask-ai/settings"; -import { LoginModal } from "@/components/login-modal"; -import { ReImagine } from "@/components/editor/ask-ai/re-imagine"; -import Loading from "@/components/loading"; -import { Checkbox } from "@/components/ui/checkbox"; -import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"; -import { TooltipContent } from "@radix-ui/react-tooltip"; -import { SelectedHtmlElement } from "./selected-html-element"; -import { FollowUpTooltip } from "./follow-up-tooltip"; -import { isTheSameHtml } from "@/lib/compare-html-diff"; - -export function AskAI({ - html, - setHtml, - onScrollToBottom, - isAiWorking, - setisAiWorking, - isEditableModeEnabled = false, - selectedElement, - setSelectedElement, - setIsEditableModeEnabled, - onNewPrompt, - onSuccess, -}: { - html: string; - setHtml: (html: string) => void; - onScrollToBottom: () => void; - isAiWorking: boolean; - onNewPrompt: (prompt: string) => void; - htmlHistory?: HtmlHistory[]; - setisAiWorking: React.Dispatch>; - onSuccess: (h: string, p: string, n?: number[][]) => void; - isEditableModeEnabled: boolean; - setIsEditableModeEnabled: React.Dispatch>; - selectedElement?: HTMLElement | null; - setSelectedElement: React.Dispatch>; -}) { - const refThink = useRef(null); - const audio = useRef(null); - - 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 [model, setModel] = useLocalStorage("model", MODELS[0].value); - const [openProvider, setOpenProvider] = useState(false); - const [providerError, setProviderError] = useState(""); - const [openProModal, setOpenProModal] = useState(false); - const [think, setThink] = useState(undefined); - const [openThink, setOpenThink] = useState(false); - const [isThinking, setIsThinking] = useState(true); - const [controller, setController] = useState(null); - const [isFollowUp, setIsFollowUp] = useState(true); - - const callAi = async (redesignMarkdown?: string) => { - if (isAiWorking) return; - if (!redesignMarkdown && !prompt.trim()) return; - setisAiWorking(true); - setProviderError(""); - setThink(""); - setOpenThink(false); - setIsThinking(true); - - let contentResponse = ""; - let thinkResponse = ""; - let lastRenderTime = 0; - - const abortController = new AbortController(); - setController(abortController); - try { - onNewPrompt(prompt); - if (isFollowUp && !redesignMarkdown && !isSameHtml) { - const selectedElementHtml = selectedElement - ? selectedElement.outerHTML - : ""; - const request = await fetch("/api/ask-ai", { - method: "PUT", - body: JSON.stringify({ - prompt, - provider, - previousPrompt, - model, - html, - selectedElementHtml, - }), - headers: { - "Content-Type": "application/json", - "x-forwarded-for": window.location.hostname, - }, - signal: abortController.signal, - }); - if (request && request.body) { - const res = await request.json(); - if (!request.ok) { - 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; - } - setHtml(res.html); - toast.success("AI responded successfully"); - setPreviousPrompt(prompt); - setPrompt(""); - setisAiWorking(false); - onSuccess(res.html, prompt, res.updatedLines); - if (audio.current) audio.current.play(); - } - } else { - const request = await fetch("/api/ask-ai", { - method: "POST", - body: JSON.stringify({ - prompt, - provider, - model, - html: isSameHtml ? "" : html, - redesignMarkdown, - }), - headers: { - "Content-Type": "application/json", - "x-forwarded-for": window.location.hostname, - }, - signal: abortController.signal, - }); - if (request && request.body) { - const reader = request.body.getReader(); - const decoder = new TextDecoder("utf-8"); - const selectedModel = MODELS.find( - (m: { value: string }) => m.value === model - ); - let contentThink: string | undefined = undefined; - const read = async () => { - const { done, value } = await reader.read(); - if (done) { - const isJson = - contentResponse.trim().startsWith("{") && - contentResponse.trim().endsWith("}"); - const jsonResponse = isJson ? JSON.parse(contentResponse) : null; - if (jsonResponse && !jsonResponse.ok) { - if (jsonResponse.openLogin) { - setOpen(true); - } else if (jsonResponse.openSelectProvider) { - setOpenProvider(true); - setProviderError(jsonResponse.message); - } else if (jsonResponse.openProModal) { - setOpenProModal(true); - } else { - toast.error(jsonResponse.message); - } - setisAiWorking(false); - return; - } - - toast.success("AI responded successfully"); - setPreviousPrompt(prompt); - setPrompt(""); - setisAiWorking(false); - setHasAsked(true); - setModel(MODELS[0].value); - if (audio.current) audio.current.play(); - - // Now we have the complete HTML including , so set it to be sure - const finalDoc = contentResponse.match( - /[\s\S]*<\/html>/ - )?.[0]; - if (finalDoc) { - setHtml(finalDoc); - } - onSuccess(finalDoc ?? contentResponse, prompt); - - return; - } - - const chunk = decoder.decode(value, { stream: true }); - thinkResponse += chunk; - if (selectedModel?.isThinker) { - const thinkMatch = thinkResponse.match(/[\s\S]*/)?.[0]; - if (thinkMatch && !thinkResponse?.includes("")) { - if ((contentThink?.length ?? 0) < 3) { - setOpenThink(true); - } - setThink(thinkMatch.replace("", "").trim()); - contentThink += chunk; - return read(); - } - } - - contentResponse += chunk; - - const newHtml = contentResponse.match( - /[\s\S]*/ - )?.[0]; - if (newHtml) { - setIsThinking(false); - let partialDoc = newHtml; - if ( - partialDoc.includes("") && - !partialDoc.includes("") - ) { - partialDoc += "\n"; - } - if ( - partialDoc.includes("") - ) { - partialDoc += "\n"; - } - if (!partialDoc.includes("")) { - partialDoc += "\n"; - } - - // 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(); - } - } - } catch (error: any) { - setisAiWorking(false); - toast.error(error.message); - if (error.openLogin) { - setOpen(true); - } - } - }; - - const stopController = () => { - if (controller) { - controller.abort(); - setController(null); - setisAiWorking(false); - setThink(""); - setOpenThink(false); - setIsThinking(false); - } - }; - - useUpdateEffect(() => { - if (refThink.current) { - refThink.current.scrollTop = refThink.current.scrollHeight; - } - }, [think]); - - useUpdateEffect(() => { - if (!isThinking) { - setOpenThink(false); - } - }, [isThinking]); - - const isSameHtml = useMemo(() => { - return isTheSameHtml(html); - }, [html]); - - return ( -
-
- {think && ( -
-
{ - setOpenThink(!openThink); - }} - > -

- {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"} -

- -
-
-

- {think} -

-
-
- )} - {selectedElement && ( -
- setSelectedElement(null)} - /> -
- )} -
- {isAiWorking && ( -
-
- -

- AI is {isThinking ? "thinking" : "coding"}...{" "} -

-
-
- - Stop generation -
-
- )} - setPrompt(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter" && !e.shiftKey) { - callAi(); - } - }} - /> -
-
-
- callAi(md)} /> - {!isSameHtml && ( - - - - - - Select an element on the page to ask DeepSite edit it - directly. - - - )} - -
-
- - -
-
- setOpen(false)} html={html} /> - setOpenProModal(false)} - /> - {!isSameHtml && ( -
- - -
- )} -
- -
- ); -} diff --git a/components/editor/ask-ai/re-imagine.tsx b/components/editor/ask-ai/re-imagine.tsx deleted file mode 100644 index 7fd5d170e0f417f4f2daf38f9b77629f64cf1e95..0000000000000000000000000000000000000000 --- a/components/editor/ask-ai/re-imagine.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { useState } from "react"; -import { Paintbrush } from "lucide-react"; -import { toast } from "sonner"; - -import { Button } from "@/components/ui/button"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { Input } from "@/components/ui/input"; -import Loading from "@/components/loading"; -import { api } from "@/lib/api"; - -export function ReImagine({ - onRedesign, -}: { - onRedesign: (md: string) => void; -}) { - const [url, setUrl] = useState(""); - const [open, setOpen] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - const checkIfUrlIsValid = (url: string) => { - const urlPattern = new RegExp( - /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/, - "i" - ); - return urlPattern.test(url); - }; - - const handleClick = async () => { - if (isLoading) return; // Prevent multiple clicks while loading - if (!url) { - toast.error("Please enter a URL."); - return; - } - if (!checkIfUrlIsValid(url)) { - toast.error("Please enter a valid URL."); - return; - } - setIsLoading(true); - const response = await api.put("/re-design", { - url: url.trim(), - }); - if (response?.data?.ok) { - setOpen(false); - setUrl(""); - onRedesign(response.data.markdown); - toast.success("DeepSite is redesigning your site! Let him cook... 🔥"); - } else { - toast.error(response?.data?.error || "Failed to redesign the site."); - } - setIsLoading(false); - }; - - return ( - -
- - - - -
-
-
- 🎨 -
-
- 🥳 -
-
- 💎 -
-
-

- Redesign your Site! -

-

- Try our new Redesign feature to give your site a fresh look. -

-
-
-
-

- Enter your website URL to get started: -

- setUrl(e.target.value)} - onBlur={(e) => { - const inputUrl = e.target.value.trim(); - if (!inputUrl) { - setUrl(""); - return; - } - if (!checkIfUrlIsValid(inputUrl)) { - toast.error("Please enter a valid URL."); - return; - } - setUrl(inputUrl); - }} - className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100" - /> -
-
-

- Then, let's redesign it! -

- -
-
- -
- - ); -} diff --git a/components/editor/ask-ai/selected-html-element.tsx b/components/editor/ask-ai/selected-html-element.tsx deleted file mode 100644 index a0a8930db4d067ef7adc46aa4917983bfcfd55f5..0000000000000000000000000000000000000000 --- a/components/editor/ask-ai/selected-html-element.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import classNames from "classnames"; -import { Code, XCircle } from "lucide-react"; - -import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible"; -import { htmlTagToText } from "@/lib/html-tag-to-text"; - -export const SelectedHtmlElement = ({ - element, - isAiWorking = false, - onDelete, -}: { - element: HTMLElement | null; - isAiWorking: boolean; - onDelete?: () => void; -}) => { - if (!element) return null; - - const tagName = element.tagName.toLowerCase(); - return ( - { - if (!isAiWorking && onDelete) { - onDelete(); - } - }} - > - -
- -
-

- {element.textContent?.trim().split(/\s+/)[0]} {htmlTagToText(tagName)} -

- - - {/* -
-

- ID: {element.id || "No ID"} -

-

- Classes:{" "} - {element.className || "No classes"} -

-
- */} - - ); -}; diff --git a/components/editor/ask-ai/settings.tsx b/components/editor/ask-ai/settings.tsx deleted file mode 100644 index 00f1cb4542827c8524ae4a666fb8ec5321e077ec..0000000000000000000000000000000000000000 --- a/components/editor/ask-ai/settings.tsx +++ /dev/null @@ -1,204 +0,0 @@ -import classNames from "classnames"; -import { PiGearSixFill } from "react-icons/pi"; -import { RiCheckboxCircleFill } from "react-icons/ri"; - -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { PROVIDERS, MODELS } from "@/lib/providers"; -import { Button } from "@/components/ui/button"; -import { - Select, - SelectContent, - SelectGroup, - SelectItem, - SelectLabel, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { useMemo } from "react"; -import { useUpdateEffect } from "react-use"; -import Image from "next/image"; - -export function Settings({ - open, - onClose, - provider, - model, - error, - isFollowUp = false, - onChange, - onModelChange, -}: { - open: boolean; - provider: string; - model: string; - error?: string; - isFollowUp?: boolean; - onClose: React.Dispatch>; - onChange: (provider: string) => void; - onModelChange: (model: string) => void; -}) { - const modelAvailableProviders = useMemo(() => { - const availableProviders = MODELS.find( - (m: { value: string }) => m.value === model - )?.providers; - if (!availableProviders) return Object.keys(PROVIDERS); - return Object.keys(PROVIDERS).filter((id) => - availableProviders.includes(id) - ); - }, [model]); - - useUpdateEffect(() => { - if (provider !== "auto" && !modelAvailableProviders.includes(provider)) { - onChange("auto"); - } - }, [model, provider]); - - return ( -
- - - - - -
- Customize Settings -
-
- {error !== "" && ( -

- {error} -

- )} - - {isFollowUp && ( -
- Note: You can't use a Thinker model for follow-up requests. - We automatically switch to the default model for you. -
- )} -
-
-
-

- Use auto-provider -

-

- We'll automatically select the best provider for you - based on your prompt. -

-
-
{ - const foundModel = MODELS.find( - (m: { value: string }) => m.value === model - ); - if (provider === "auto" && foundModel?.autoProvider) { - onChange(foundModel.autoProvider); - } else { - onChange("auto"); - } - }} - > -
-
-
- -
-
- - -
- ); -} diff --git a/components/editor/deploy-button/index.tsx b/components/editor/deploy-button/index.tsx deleted file mode 100644 index 739169532d7da6f196db5ba317b1057664f684b6..0000000000000000000000000000000000000000 --- a/components/editor/deploy-button/index.tsx +++ /dev/null @@ -1,173 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useState } from "react"; -import { toast } from "sonner"; -import Image from "next/image"; -import { useRouter } from "next/navigation"; -import { MdSave } from "react-icons/md"; -import { Rocket } from "lucide-react"; - -import SpaceIcon from "@/assets/space.svg"; -import Loading from "@/components/loading"; -import { Button } from "@/components/ui/button"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { Input } from "@/components/ui/input"; -import { api } from "@/lib/api"; -import { LoginModal } from "@/components/login-modal"; -import { useUser } from "@/hooks/useUser"; - -export function DeployButton({ - html, - prompts, -}: { - html: string; - prompts: string[]; -}) { - const router = useRouter(); - const { user } = useUser(); - const [loading, setLoading] = useState(false); - const [open, setOpen] = useState(false); - - const [config, setConfig] = useState({ - title: "", - }); - - const createSpace = async () => { - if (!config.title) { - toast.error("Please enter a title for your space."); - return; - } - setLoading(true); - - try { - const res = await api.post("/me/projects", { - title: config.title, - html, - prompts, - }); - if (res.data.ok) { - router.push(`/projects/${res.data.path}?deploy=true`); - } else { - toast.error(res?.data?.error || "Failed to create space"); - } - } catch (err: any) { - toast.error(err.response?.data?.error || err.message); - } finally { - setLoading(false); - } - }; - - // TODO add a way to do not allow people to deploy if the html is broken. - - return ( -
-
- {user?.id ? ( - - -
- - -
- - -
-
-
- 🚀 -
-
- Space Icon -
-
- 👻 -
-
-

- Deploy as Space! -

-

- Save and Deploy your project to a Space on the Hub. Spaces are - a way to share your project with the world. -

-
-
-
-

- Choose a title for your space: -

- - setConfig({ ...config, title: e.target.value }) - } - className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100" - /> -
-
-

- Then, let's deploy it! -

- -
-
- - - ) : ( - <> - - - - )} - setOpen(false)} - html={html} - title="Log In to save your Project" - description="Log In through your Hugging Face account to save your project and increase your monthly free limit." - /> -
-
- ); -} diff --git a/components/editor/footer/index.tsx b/components/editor/footer/index.tsx deleted file mode 100644 index 08fb38862aedc91072857ca926f220fafa4fbdf6..0000000000000000000000000000000000000000 --- a/components/editor/footer/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import classNames from "classnames"; -import { FaMobileAlt } from "react-icons/fa"; -import { HelpCircle, RefreshCcw, SparkleIcon } from "lucide-react"; -import { FaLaptopCode } from "react-icons/fa6"; -import { HtmlHistory } from "@/types"; -import { Button } from "@/components/ui/button"; -import { MdAdd } from "react-icons/md"; -import { History } from "@/components/editor/history"; -import { UserMenu } from "@/components/user-menu"; -import { useUser } from "@/hooks/useUser"; - -const DEVICES = [ - { - name: "desktop", - icon: FaLaptopCode, - }, - { - name: "mobile", - icon: FaMobileAlt, - }, -]; - -export function Footer({ - onReset, - htmlHistory, - setHtml, - device, - setDevice, - iframeRef, -}: { - onReset: () => void; - htmlHistory?: HtmlHistory[]; - device: "desktop" | "mobile"; - setHtml: (html: string) => void; - iframeRef?: React.RefObject; - setDevice: React.Dispatch>; -}) { - const { user } = useUser(); - - const handleRefreshIframe = () => { - if (iframeRef?.current) { - const iframe = iframeRef.current; - const content = iframe.srcdoc; - iframe.srcdoc = ""; - setTimeout(() => { - iframe.srcdoc = content; - }, 10); - } - }; - - return ( -
-
- {user && - (user?.isLocalUse ? ( - <> -
- Local Usage -
- - ) : ( - - ))} - {user &&

|

} - - {htmlHistory && htmlHistory.length > 0 && ( - <> -

|

- - - )} -
-
- - - - - - - -
-
- {DEVICES.map((deviceItem) => ( - - ))} -
-
-
- ); -} diff --git a/components/editor/header/index.tsx b/components/editor/header/index.tsx deleted file mode 100644 index 184918363d4aa28eb1e866e9d711d8fdb15f2dc8..0000000000000000000000000000000000000000 --- a/components/editor/header/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { ReactNode } from "react"; -import { Eye, MessageCircleCode } from "lucide-react"; - -import Logo from "@/assets/logo.svg"; - -import { Button } from "@/components/ui/button"; -import classNames from "classnames"; -import Image from "next/image"; - -const TABS = [ - { - value: "chat", - label: "Chat", - icon: MessageCircleCode, - }, - { - value: "preview", - label: "Preview", - icon: Eye, - }, -]; - -export function Header({ - tab, - onNewTab, - children, -}: { - tab: string; - onNewTab: (tab: string) => void; - children?: ReactNode; -}) { - return ( -
-
-

- DeepSite Logo -

- DeepSite - - {" "} - v2 - -

-

-
-
- {TABS.map((item) => ( - - ))} -
-
{children}
-
- ); -} diff --git a/components/editor/history/index.tsx b/components/editor/history/index.tsx deleted file mode 100644 index 7687479a53244e98dcab72ff12b6154dad2030cf..0000000000000000000000000000000000000000 --- a/components/editor/history/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { History as HistoryIcon } from "lucide-react"; -import { HtmlHistory } from "@/types"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { Button } from "@/components/ui/button"; - -export function History({ - history, - setHtml, -}: { - history: HtmlHistory[]; - setHtml: (html: string) => void; -}) { - return ( - - - - - -
- History -
-
-
    - {history?.map((item, index) => ( -
  • -
    - {item.prompt} - - {new Date(item.createdAt).toLocaleDateString("en-US", { - month: "2-digit", - day: "2-digit", - year: "2-digit", - }) + - " " + - new Date(item.createdAt).toLocaleTimeString("en-US", { - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - hour12: false, - })} - -
    - -
    • - ))} -
-
- - - ); -} diff --git a/components/editor/index.tsx b/components/editor/index.tsx deleted file mode 100644 index 2dfafd674dcda224b96ec2f34f70f164f5473b5f..0000000000000000000000000000000000000000 --- a/components/editor/index.tsx +++ /dev/null @@ -1,342 +0,0 @@ -"use client"; -import { useRef, useState } from "react"; -import { toast } from "sonner"; -import { editor } from "monaco-editor"; -import Editor from "@monaco-editor/react"; -import { CopyIcon } from "lucide-react"; -import { - useCopyToClipboard, - useEvent, - useLocalStorage, - useMount, - useUnmount, - useUpdateEffect, -} from "react-use"; -import classNames from "classnames"; -import { useRouter, useSearchParams } from "next/navigation"; - -import { Header } from "@/components/editor/header"; -import { Footer } from "@/components/editor/footer"; -import { defaultHTML } from "@/lib/consts"; -import { Preview } from "@/components/editor/preview"; -import { useEditor } from "@/hooks/useEditor"; -import { AskAI } from "@/components/editor/ask-ai"; -import { DeployButton } from "./deploy-button"; -import { Project } from "@/types"; -import { SaveButton } from "./save-button"; -import { LoadProject } from "../my-projects/load-project"; -import { isTheSameHtml } from "@/lib/compare-html-diff"; - -export const AppEditor = ({ project }: { project?: Project | null }) => { - const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content"); - const [, copyToClipboard] = useCopyToClipboard(); - const { html, setHtml, htmlHistory, setHtmlHistory, prompts, setPrompts } = - useEditor(project?.html ?? (htmlStorage as string) ?? defaultHTML); - // get query params from URL - const searchParams = useSearchParams(); - const router = useRouter(); - const deploy = searchParams.get("deploy") === "true"; - - const iframeRef = useRef(null); - const preview = useRef(null); - const editor = useRef(null); - const editorRef = useRef(null); - const resizer = useRef(null); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const monacoRef = useRef(null); - - const [currentTab, setCurrentTab] = useState("chat"); - const [device, setDevice] = useState<"desktop" | "mobile">("desktop"); - const [isResizing, setIsResizing] = useState(false); - const [isAiWorking, setIsAiWorking] = useState(false); - const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false); - const [selectedElement, setSelectedElement] = useState( - null - ); - - /** - * 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); - }; - - useMount(() => { - if (deploy && project?._id) { - toast.success("Your project is deployed! 🎉", { - action: { - label: "See Project", - onClick: () => { - window.open( - `https://huggingface.co/spaces/${project?.space_id}`, - "_blank" - ); - }, - }, - }); - router.replace(`/projects/${project?.space_id}`); - } - if (htmlStorage) { - removeHtmlStorage(); - toast.warning("Previous HTML content restored from local storage."); - } - - resetLayout(); - if (!resizer.current) return; - resizer.current.addEventListener("mousedown", handleMouseDown); - window.addEventListener("resize", resetLayout); - }); - useUnmount(() => { - document.removeEventListener("mousemove", handleResize); - document.removeEventListener("mouseup", handleMouseUp); - if (resizer.current) { - resizer.current.removeEventListener("mousedown", handleMouseDown); - } - window.removeEventListener("resize", resetLayout); - }); - - // Prevent accidental navigation away when AI is working or content has changed - useEvent("beforeunload", (e) => { - if (isAiWorking || !isTheSameHtml(html)) { - e.preventDefault(); - return ""; - } - }); - - useUpdateEffect(() => { - if (currentTab === "chat") { - // Reset editor width when switching to reasoning tab - resetLayout(); - // re-add the event listener for resizing - if (resizer.current) { - resizer.current.addEventListener("mousedown", handleMouseDown); - } - } else { - if (preview.current) { - // Reset preview width when switching to preview tab - preview.current.style.width = "100%"; - } - } - }, [currentTab]); - - const handleEditorValidation = (markers: editor.IMarker[]) => { - console.log("Editor validation markers:", markers); - }; - - return ( -
-
- { - router.push(`/projects/${project.space_id}`); - }} - /> - {project?._id ? ( - - ) : ( - - )} -
-
- {currentTab === "chat" && ( - <> -
- { - copyToClipboard(html); - toast.success("HTML copied to clipboard!"); - }} - /> - { - const newValue = value ?? ""; - setHtml(newValue); - }} - onMount={(editor, monaco) => { - editorRef.current = editor; - monacoRef.current = monaco; - }} - onValidate={handleEditorValidation} - /> - { - setHtml(newHtml); - }} - htmlHistory={htmlHistory} - onSuccess={( - finalHtml: string, - p: string, - updatedLines?: number[][] - ) => { - const currentHistory = [...htmlHistory]; - currentHistory.unshift({ - html: finalHtml, - createdAt: new Date(), - prompt: p, - }); - setHtmlHistory(currentHistory); - setSelectedElement(null); - // if xs or sm - if (window.innerWidth <= 1024) { - setCurrentTab("preview"); - } - if (updatedLines && updatedLines?.length > 0) { - const decorations = updatedLines.map((line) => ({ - range: new monacoRef.current.Range( - line[0], - 1, - line[1], - 1 - ), - options: { - inlineClassName: "matched-line", - }, - })); - setTimeout(() => { - editorRef?.current - ?.getModel() - ?.deltaDecorations([], decorations); - - editorRef.current?.revealLine(updatedLines[0][0]); - }, 100); - } - }} - isAiWorking={isAiWorking} - setisAiWorking={setIsAiWorking} - onNewPrompt={(prompt: string) => { - setPrompts((prev) => [...prev, prompt]); - }} - onScrollToBottom={() => { - editorRef.current?.revealLine( - editorRef.current?.getModel()?.getLineCount() ?? 0 - ); - }} - isEditableModeEnabled={isEditableModeEnabled} - setIsEditableModeEnabled={setIsEditableModeEnabled} - selectedElement={selectedElement} - setSelectedElement={setSelectedElement} - /> -
-
- - )} - { - setIsEditableModeEnabled(false); - setSelectedElement(element); - setCurrentTab("chat"); - }} - /> -
-
{ - if (isAiWorking) { - toast.warning("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 - ); - } - }} - htmlHistory={htmlHistory} - setHtml={setHtml} - iframeRef={iframeRef} - device={device} - setDevice={setDevice} - /> -
- ); -}; diff --git a/components/editor/preview/index.tsx b/components/editor/preview/index.tsx deleted file mode 100644 index 397f6a4f861b3146b834ef018d99df73835ab673..0000000000000000000000000000000000000000 --- a/components/editor/preview/index.tsx +++ /dev/null @@ -1,176 +0,0 @@ -"use client"; -import { useUpdateEffect } from "react-use"; -import { useMemo, useState } from "react"; -import classNames from "classnames"; -import { toast } from "sonner"; - -import { cn } from "@/lib/utils"; -import { GridPattern } from "@/components/magic-ui/grid-pattern"; -import { htmlTagToText } from "@/lib/html-tag-to-text"; - -export const Preview = ({ - html, - isResizing, - isAiWorking, - ref, - device, - currentTab, - iframeRef, - isEditableModeEnabled, - onClickElement, -}: { - html: string; - isResizing: boolean; - isAiWorking: boolean; - ref: React.RefObject; - iframeRef?: React.RefObject; - device: "desktop" | "mobile"; - currentTab: string; - isEditableModeEnabled?: boolean; - onClickElement?: (element: HTMLElement) => void; -}) => { - const [hoveredElement, setHoveredElement] = useState( - null - ); - - // add event listener to the iframe to track hovered elements - const handleMouseOver = (event: MouseEvent) => { - if (iframeRef?.current) { - const iframeDocument = iframeRef.current.contentDocument; - if (iframeDocument) { - const targetElement = event.target as HTMLElement; - if ( - hoveredElement !== targetElement && - targetElement !== iframeDocument.body - ) { - setHoveredElement(targetElement); - targetElement.classList.add("hovered-element"); - } else { - return setHoveredElement(null); - } - } - } - }; - const handleMouseOut = () => { - setHoveredElement(null); - }; - const handleClick = (event: MouseEvent) => { - if (iframeRef?.current) { - const iframeDocument = iframeRef.current.contentDocument; - if (iframeDocument) { - const targetElement = event.target as HTMLElement; - if (targetElement !== iframeDocument.body) { - onClickElement?.(targetElement); - } - } - } - }; - - useUpdateEffect(() => { - const cleanupListeners = () => { - if (iframeRef?.current?.contentDocument) { - const iframeDocument = iframeRef.current.contentDocument; - iframeDocument.removeEventListener("mouseover", handleMouseOver); - iframeDocument.removeEventListener("mouseout", handleMouseOut); - iframeDocument.removeEventListener("click", handleClick); - } - }; - - if (iframeRef?.current) { - const iframeDocument = iframeRef.current.contentDocument; - if (iframeDocument) { - // Clean up existing listeners first - cleanupListeners(); - - if (isEditableModeEnabled) { - iframeDocument.addEventListener("mouseover", handleMouseOver); - iframeDocument.addEventListener("mouseout", handleMouseOut); - iframeDocument.addEventListener("click", handleClick); - } - } - } - - // Clean up when component unmounts or dependencies change - return cleanupListeners; - }, [iframeRef, isEditableModeEnabled]); - - const selectedElement = useMemo(() => { - if (!isEditableModeEnabled) return null; - if (!hoveredElement) return null; - return hoveredElement; - }, [hoveredElement, isEditableModeEnabled]); - - return ( -
{ - if (isAiWorking) { - e.preventDefault(); - e.stopPropagation(); - toast.warning("Please wait for the AI to finish working."); - } - }} - > - - {!isAiWorking && hoveredElement && selectedElement && ( -
- - {htmlTagToText(selectedElement.tagName.toLowerCase())} - -
- )} - - - - -
-
-

- {project.space_id} -

-

- Updated{" "} - {formatDistance( - new Date(project._updatedAt || Date.now()), - new Date(), - { - addSuffix: true, - } - )} -

-
- - - - - - - - - - Project Settings - - - - - -
-
- ); -} diff --git a/components/pro-modal/index.tsx b/components/pro-modal/index.tsx deleted file mode 100644 index b9bdb4a73bdfa203f9055c9f4b65fe65f7d6258a..0000000000000000000000000000000000000000 --- a/components/pro-modal/index.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { useLocalStorage } from "react-use"; -import { Button } from "@/components/ui/button"; -import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; -import { CheckCheck } from "lucide-react"; -import { isTheSameHtml } from "@/lib/compare-html-diff"; - -export const ProModal = ({ - open, - html, - onClose, -}: { - open: boolean; - html: string; - onClose: React.Dispatch>; -}) => { - const [, setStorage] = useLocalStorage("html_content"); - const handleProClick = () => { - if (!isTheSameHtml(html)) { - setStorage(html); - } - window.open("https://huggingface.co/subscribe/pro?from=DeepSite", "_blank"); - onClose(false); - }; - return ( - - - -
-
-
- 🚀 -
-
- 🤩 -
-
- 🥳 -
-
-

- Only $9 to enhance your possibilities -

-

- It seems like you have reached the monthly free limit of DeepSite. -

-
-

- Upgrade to a Account, and unlock your - DeepSite high quota access ⚡ -

-
    -
  • - You'll also unlock some Hugging Face PRO features, like: -
    • -
  • - - Get acces to thousands of AI app (ZeroGPU) with high quota -
    • -
  • - - Get exclusive early access to new features and updates -
    • -
  • - - Get free credits across all Inference Providers -
    • -
  • - ... and lots more! -
    • -
- -
- - - ); -}; - -const ProTag = ({ className }: { className?: string }) => ( - - PRO - -); -export default ProModal; diff --git a/components/providers/tanstack-query-provider.tsx b/components/providers/tanstack-query-provider.tsx deleted file mode 100644 index 618056fcc0e27cb4433d0debe722ac8bb457f840..0000000000000000000000000000000000000000 --- a/components/providers/tanstack-query-provider.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client"; - -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; - -export default function TanstackProvider({ - children, -}: { - children: React.ReactNode; -}) { - const queryClient = new QueryClient(); - - return ( - - {children} - {/* */} - - ); -} diff --git a/components/public/navigation/index.tsx b/components/public/navigation/index.tsx deleted file mode 100644 index 95c6975c5f3799b2a1db77ae56520297a9e0760e..0000000000000000000000000000000000000000 --- a/components/public/navigation/index.tsx +++ /dev/null @@ -1,156 +0,0 @@ -"use client"; - -import { useRef, useState } from "react"; -import Image from "next/image"; -import Link from "next/link"; -import { useMount, useUnmount } from "react-use"; -import classNames from "classnames"; - -import { Button } from "@/components/ui/button"; -import Logo from "@/assets/logo.svg"; -import { useUser } from "@/hooks/useUser"; -import { UserMenu } from "@/components/user-menu"; - -const navigationLinks = [ - { - name: "Create Website", - href: "/projects/new", - }, - { - name: "Features", - href: "#features", - }, - { - name: "Community", - href: "#community", - }, - { - name: "Deploy", - href: "#deploy", - }, -]; - -export default function Navigation() { - const { openLoginWindow, user } = useUser(); - const [hash, setHash] = useState(""); - - const selectorRef = useRef(null); - const linksRef = useRef( - new Array(navigationLinks.length).fill(null) - ); - const [isScrolled, setIsScrolled] = useState(false); - - useMount(() => { - const handleScroll = () => { - const scrollTop = window.scrollY; - setIsScrolled(scrollTop > 100); - }; - - const initialHash = window.location.hash; - if (initialHash) { - setHash(initialHash); - calculateSelectorPosition(initialHash); - } - - window.addEventListener("scroll", handleScroll); - }); - - useUnmount(() => { - window.removeEventListener("scroll", () => {}); - }); - - const handleClick = (href: string) => { - setHash(href); - calculateSelectorPosition(href); - }; - - const calculateSelectorPosition = (href: string) => { - if (selectorRef.current && linksRef.current) { - const index = navigationLinks.findIndex((l) => l.href === href); - const targetLink = linksRef.current[index]; - if (targetLink) { - const targetRect = targetLink.getBoundingClientRect(); - selectorRef.current.style.left = targetRect.left + "px"; - selectorRef.current.style.width = targetRect.width + "px"; - } - } - }; - - return ( -
- -
- ); -} diff --git a/components/space/ask-ai/index.tsx b/components/space/ask-ai/index.tsx deleted file mode 100644 index 46202ffe6f8d82f29eab068db97573985eaf9cca..0000000000000000000000000000000000000000 --- a/components/space/ask-ai/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -"use client"; - -import { ArrowUp } from "lucide-react"; -import { PiGearSixFill } from "react-icons/pi"; -import { TiUserAdd } from "react-icons/ti"; - -import { Button } from "@/components/ui/button"; - -export const AskAi = () => { - return ( - <> -
-