🖼️ upload emoji

actions/projects.ts

@@ -14,9 +14,21 @@ import { Commit, File } from "@/lib/type";
 
 export interface ProjectWithCommits extends SpaceEntry {
   commits?: Commit[];
+  medias?: string[];
 }
 
 const IGNORED_PATHS = ["README.md", ".gitignore", ".gitattributes"];
+const IGNORED_FORMATS = [
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".mp4",
+  ".mp3",
+  ".wav",
+];
 
 export const getProjects = async () => {
   const projects: SpaceEntry[] = [];
@@ -61,18 +73,53 @@ export const getProject = async (id: string, commitId?: string) => {
       name: id,
     };
     const files: File[] = [];
+    const medias: string[] = [];
     const params = { repo, accessToken: token };
     if (commitId) {
       Object.assign(params, { revision: commitId });
     }
     for await (const fileInfo of listFiles(params)) {
       if (IGNORED_PATHS.includes(fileInfo.path)) continue;
-      if (
-        fileInfo.path.endsWith(".html") ||
-        fileInfo.path.endsWith(".css") ||
-        fileInfo.path.endsWith(".js") ||
-        fileInfo.path.endsWith(".json")
-      ) {
+      if (IGNORED_FORMATS.some((format) => fileInfo.path.endsWith(format))) {
+        medias.push(
+          `https://huggingface.co/spaces/${id}/resolve/main/${fileInfo.path}`
+        );
+        continue;
+      }
+
+      if (fileInfo.type === "directory") {
+        for await (const subFile of listFiles({
+          repo,
+          accessToken: token,
+          path: fileInfo.path,
+        })) {
+          if (IGNORED_FORMATS.some((format) => subFile.path.endsWith(format))) {
+            medias.push(
+              `https://huggingface.co/spaces/${id}/resolve/main/${subFile.path}`
+            );
+          }
+          const blob = await downloadFile({
+            repo,
+            accessToken: token,
+            path: subFile.path,
+            raw: true,
+            ...(commitId ? { revision: commitId } : {}),
+          }).catch((_) => {
+            return null;
+          });
+          if (!blob) {
+            continue;
+          }
+          const html = await blob?.text();
+          if (!html) {
+            continue;
+          }
+          files[subFile.path === "index.html" ? "unshift" : "push"]({
+            path: subFile.path,
+            content: html,
+          });
+        }
+      } else {
         const blob = await downloadFile({
           repo,
           accessToken: token,
@@ -94,46 +141,17 @@ export const getProject = async (id: string, commitId?: string) => {
           content: html,
         });
       }
-      if (fileInfo.type === "directory") {
-        for await (const subFile of listFiles({
-          repo,
-          accessToken: token,
-          path: fileInfo.path,
-        })) {
-          if (
-            subFile.path.endsWith(".html") ||
-            subFile.path.endsWith(".css") ||
-            subFile.path.endsWith(".js") ||
-            subFile.path.endsWith(".json")
-          ) {
-            const blob = await downloadFile({
-              repo,
-              accessToken: token,
-              path: subFile.path,
-              raw: true,
-              ...(commitId ? { revision: commitId } : {}),
-            }).catch((_) => {
-              return null;
-            });
-            if (!blob) {
-              continue;
-            }
-            const html = await blob?.text();
-            if (!html) {
-              continue;
-            }
-            files[subFile.path === "index.html" ? "unshift" : "push"]({
-              path: subFile.path,
-              content: html,
-            });
-          }
-        }
-      }
     }
     const commits: Commit[] = [];
     const commitIterator = listCommits({ repo, accessToken: token });
     for await (const commit of commitIterator) {
-      if (commit.title?.toLowerCase() === "initial commit") continue;
+      if (
+        commit.title?.toLowerCase() === "initial commit" ||
+        commit.title
+          ?.toLowerCase()
+          ?.includes("upload media files through deepsite")
+      )
+        continue;
       commits.push({
         title: commit.title,
         oid: commit.oid,
@@ -145,6 +163,7 @@ export const getProject = async (id: string, commitId?: string) => {
     }
 
     project.commits = commits;
+    project.medias = medias;
 
     return { project, files };
   } catch (error) {

app/api/ask/route.ts

@@ -20,9 +20,9 @@ export async function POST(request: Request) {
     previousMessages = [],
     files = [],
     provider: initialProvider,
-    mentions = [],
     model,
     redesignMd,
+    medias,
   } = body;
   const provider = initialProvider ?? "auto";
 
@@ -81,7 +81,13 @@ export async function POST(request: Request) {
               content: `${
                 redesignMd?.url &&
                 `Redesign the following website ${redesignMd.url}, try to use the same images and content, but you can still improve it if needed. Do the best version possibile. Here is the markdown:\n ${redesignMd.md} \n\n`
-              }${prompt}`,
+              }${prompt} ${
+                medias && medias.length > 0
+                  ? `\nHere is the list of my media files: ${medias.join(
+                      ", "
+                    )}\n`
+                  : ""
+              }`,
             },
           ],
           stream: true,

app/api/projects/[repoId]/medias/route.ts

@@ -0,0 +1,89 @@
+import { auth } from "@/lib/auth";
+import { createBranch, RepoDesignation, uploadFiles } from "@huggingface/hub";
+import { format } from "date-fns";
+import { NextResponse } from "next/server";
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ repoId: string }> }
+) {
+  const { repoId }: { repoId: string } = await params;
+  const session = await auth();
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const token = session.accessToken;
+
+  const repo: RepoDesignation = {
+    type: "space",
+    name: session.user?.username + "/" + repoId,
+  };
+
+  const formData = await request.formData();
+  const newMedias = formData.getAll("images") as File[];
+
+  const filesToUpload: File[] = [];
+
+  if (!newMedias || newMedias.length === 0) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "At least one media file is required under the 'images' key",
+      },
+      { status: 400 }
+    );
+  }
+
+  try {
+    for (const media of newMedias) {
+      const isImage = media.type.startsWith("image/");
+      const isVideo = media.type.startsWith("video/");
+      const isAudio = media.type.startsWith("audio/");
+
+      const folderPath = isImage
+        ? "images/"
+        : isVideo
+        ? "videos/"
+        : isAudio
+        ? "audios/"
+        : null;
+
+      if (!folderPath) {
+        return NextResponse.json(
+          { ok: false, error: "Unsupported media type: " + media.type },
+          { status: 400 }
+        );
+      }
+
+      const mediaName = `${folderPath}${media.name}`;
+      const processedFile = new File([media], mediaName, { type: media.type });
+      filesToUpload.push(processedFile);
+    }
+
+    await uploadFiles({
+      repo,
+      files: filesToUpload,
+      accessToken: token,
+      commitTitle: `📁 Upload media files through DeepSite`,
+    });
+
+    return NextResponse.json(
+      {
+        success: true,
+        medias: filesToUpload.map(
+          (file) =>
+            `https://huggingface.co/spaces/${session.user?.username}/${repoId}/resolve/main/${file.name}`
+        ),
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.log(error);
+    return NextResponse.json(
+      { ok: false, error: error ?? "Failed to upload media files" },
+      { status: 500 }
+    );
+  }
+
+  return NextResponse.json({ success: true }, { status: 200 });
+}

components/ask-ai/ask-ai.tsx

@@ -20,6 +20,7 @@ export function AskAI({
   className,
   onToggleMobileTab,
   files,
+  medias,
   isNew = false,
   isHistoryView,
   projectName = "new",
@@ -27,6 +28,7 @@ export function AskAI({
   initialPrompt?: string;
   className?: string;
   files?: File[] | null;
+  medias?: string[] | null;
   onToggleMobileTab?: (tab: MobileTabType) => void;
   isNew?: boolean;
   isHistoryView?: boolean;
@@ -46,6 +48,7 @@ export function AskAI({
     md: string;
     url: string;
   } | null>(null);
+  const [selectedMedias, setSelectedMedias] = useState<string[]>([]);
 
   const router = useRouter();
   const { callAi, isLoading, stopGeneration, audio } =
@@ -83,7 +86,14 @@ export function AskAI({
     if (contentEditableRef.current) {
       contentEditableRef.current.innerHTML = "";
     }
-    callAi({ prompt, model, onComplete, provider, redesignMd });
+    callAi({
+      prompt,
+      model,
+      onComplete,
+      provider,
+      redesignMd,
+      medias: selectedMedias ?? [],
+    });
   };
 
   return (
@@ -103,7 +113,11 @@ export function AskAI({
       />
       <footer className="flex items-center justify-between mt-0">
         <div className="flex items-center gap-1.5">
-          <Uploader />
+          <Uploader
+            medias={medias}
+            selected={selectedMedias}
+            setSelected={setSelectedMedias}
+          />
           <Models
             model={model}
             setModel={setModel}

components/ask-ai/uploader.tsx

@@ -1,5 +1,14 @@
-import { Paperclip } from "lucide-react";
-import { useState } from "react";
+import {
+  CheckCircle,
+  FileVideo,
+  ImageIcon,
+  Music,
+  Paperclip,
+  Video,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import Image from "next/image";
+import { useParams } from "next/navigation";
 
 import {
   Popover,
@@ -7,30 +16,216 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
+import { getFileType, humanizeNumber } from "@/lib/utils";
+import { useQueryClient } from "@tanstack/react-query";
+import { ProjectWithCommits } from "@/actions/projects";
+import { toast } from "sonner";
+import Loading from "../loading";
 // todo: implement the uploader component
 
-export const Uploader = () => {
+export const Uploader = ({
+  medias,
+  selected,
+  setSelected,
+}: {
+  medias?: string[] | null;
+  selected: string[];
+  setSelected: React.Dispatch<React.SetStateAction<string[]>>;
+}) => {
+  const queryClient = useQueryClient();
+  const { repoId } = useParams<{ repoId: string }>();
+
   const [open, setOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const getFileIcon = (url: string) => {
+    const fileType = getFileType(url);
+    switch (fileType) {
+      case "image":
+        return <ImageIcon className="size-4" />;
+      case "video":
+        return <Video className="size-4" />;
+      case "audio":
+        return <Music className="size-4" />;
+      default:
+        return <FileVideo className="size-4" />;
+    }
+  };
+
+  const uploadFiles = async (files: FileList | null) => {
+    setError(null);
+    if (!files || files.length === 0) return;
+
+    setIsUploading(true);
+    const data = new FormData();
+    Array.from(files).forEach((file) => {
+      data.append("images", file);
+    });
+
+    const response = await fetch(`/api/projects/${repoId}/medias`, {
+      method: "POST",
+      body: data,
+    })
+      .then(async (response) => {
+        if (response.ok) {
+          const data = await response.json();
+          return data;
+        }
+        throw new Error("Failed to save changes");
+      })
+      .catch((err) => {
+        return { success: false, err };
+      });
+
+    if (response.success) {
+      queryClient.setQueryData(
+        ["project"],
+        (oldProject: ProjectWithCommits) => ({
+          ...oldProject,
+          medias: [...response.medias, ...(oldProject?.medias ?? [])],
+        })
+      );
+      toast.success("Media files uploaded successfully!");
+    } else {
+      setError(
+        response.err ?? "Failed to upload media files, try again later."
+      );
+    }
+
+    setIsUploading(false);
+  };
+
   return (
     <div className="flex items-center justify-start gap-1 flex-wrap">
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button
-            size="icon-xs"
-            variant={open ? "default" : "bordered"}
-            className="rounded-full!"
+            size={selected?.length > 0 ? "xs" : "icon-xs"}
+            variant={
+              selected?.length > 0 ? "indigo" : open ? "default" : "bordered"
+            }
+            className="rounded-full! relative"
           >
             <Paperclip className="size-3" />
+            {selected?.length > 0 && (
+              <span className="py-0.5 px-1 text-[10px] flex items-center justify-center rounded-full font-semibold bg-white/20 dark:bg-indigo-500 dark:text-white font-mono min-w-4">
+                {humanizeNumber(selected.length)}
+              </span>
+            )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent
-          align="start"
-          className="space-y-4 min-w-fit rounded-2xl! p-0!"
-        >
-          <main className="p-4">
-            <p className="text-xs text-muted-foreground mb-2.5">
-              Upload a file
+        <PopoverContent className="translate-x-6 rounded-2xl! p-0! bg-accent! border-border-muted! w-86 text-center overflow-hidden">
+          <header className="bg-linear-to-b from-indigo-500/15 dark:from-indigo-500/40 to-accent p-6">
+            <div className="flex items-center justify-center -space-x-4 mb-3">
+              <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                📷
+              </div>
+              <div className="size-11 rounded-full bg-yellow-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+                🖼️
+              </div>
+              <div className="size-9 rounded-full bg-green-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+                📁
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-primary">Upload Files</p>
+            <p className="text-sm text-muted-foreground mt-1.5">
+              Upload files to include them in the AI context.
             </p>
+          </header>
+          <main className="space-y-4 px-6 pb-6">
+            {error && <p className="text-sm text-red-500">{error}</p>}
+            {medias && medias.length > 0 && (
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">
+                  Uploaded files:
+                </p>
+                <div className="flex flex-col gap-2 max-h-60 overflow-y-auto">
+                  <div className="grid grid-cols-4 gap-1.5 flex-wrap max-h-40 overflow-y-auto">
+                    {medias.map((media: string) => {
+                      const fileType = getFileType(media);
+                      return (
+                        <div
+                          key={media}
+                          className="select-none relative cursor-pointer bg-accent rounded-md border-2 border-border transition-all duration-300"
+                          onClick={() =>
+                            setSelected(
+                              selected.includes(media)
+                                ? selected.filter((f) => f !== media)
+                                : [...selected, media]
+                            )
+                          }
+                        >
+                          {fileType === "image" ? (
+                            <Image
+                              src={media}
+                              alt="uploaded image"
+                              width={56}
+                              height={56}
+                              className="object-contain w-full rounded-sm aspect-square h-14"
+                            />
+                          ) : fileType === "video" ? (
+                            <div className="w-full h-14 rounded-sm bg-gray-100 flex items-center justify-center relative">
+                              <video
+                                src={media}
+                                className="w-full h-full object-cover rounded-sm"
+                                muted
+                                preload="metadata"
+                              />
+                              <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-sm">
+                                <Video className="size-4 text-white" />
+                              </div>
+                            </div>
+                          ) : fileType === "audio" ? (
+                            <div className="w-full h-14 rounded-sm bg-linear-to-br from-purple-100 to-pink-100 flex items-center justify-center">
+                              <Music className="size-6 text-purple-600" />
+                            </div>
+                          ) : (
+                            <div className="w-full h-14 rounded-sm bg-gray-100 flex items-center justify-center">
+                              {getFileIcon(media)}
+                            </div>
+                          )}
+                          {selected.includes(media) && (
+                            <div className="absolute top-0 right-0 h-full w-full flex items-center justify-center bg-black/50 rounded-md">
+                              <CheckCircle className="size-6 text-neutral-100" />
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
+            <div>
+              <Button
+                variant="default"
+                onClick={() => fileInputRef.current?.click()}
+                className="relative w-full"
+                disabled={isUploading}
+              >
+                {isUploading ? (
+                  <>
+                    <Loading
+                      overlay={false}
+                      className="ml-2 size-4 animate-spin text-primary-foreground"
+                    />
+                    Uploading media file(s)...
+                  </>
+                ) : (
+                  "Upload Media Files"
+                )}
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                multiple
+                accept="image/*,video/*,audio/*,.mp3,.mp4,.wav,.aac,.m4a,.ogg,.webm,.avi,.mov"
+                onChange={(e) => uploadFiles(e.target.files)}
+              />
+            </div>
           </main>
         </PopoverContent>
       </Popover>

components/ask-ai/useGeneration.ts

@@ -193,6 +193,7 @@ export const useGeneration = (projectName: string) => {
     onComplete,
     provider = "auto",
     redesignMd,
+    medias,
   }: {
     prompt: string;
     model: string;
@@ -200,6 +201,7 @@ export const useGeneration = (projectName: string) => {
       url: string;
       md: string;
     } | null;
+    medias?: string[] | null;
     onComplete: () => void;
     provider?: ProviderType;
   }) => {
@@ -234,6 +236,7 @@ export const useGeneration = (projectName: string) => {
         previousMessages,
         provider,
         redesignMd,
+        medias,
       }),
       headers: {
         "Content-Type": "application/json",

components/code/index.tsx

@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils";
 import Loading from "../loading";
 import { ProjectWithCommits } from "@/actions/projects";
 
-// todo: while no them setted but in dark mode, the dark theme is not setted correctly.
+// todo: while no theme setted but in dark mode, the dark theme is not setted correctly.
 
 export function AppEditorCode() {
   const queryClient = useQueryClient();

components/editor/header.tsx

@@ -96,11 +96,15 @@ export function AppEditorHeader({
             <>
               {!isHistoryView && (
                 <Button
-                  variant="indigo"
+                  variant="bordered"
                   size="xs"
                   onClick={handleToggleActivity}
                 >
-                  {currentActivity === "chat" ? <Code /> : <MessageCircle />}
+                  {currentActivity === "chat" ? (
+                    <Code className="size-3.5" />
+                  ) : (
+                    <MessageCircle className="size-3.5" />
+                  )}
                   {currentActivity === "chat" ? "Code" : "Chat"}
                 </Button>
               )}
@@ -112,12 +116,12 @@ export function AppEditorHeader({
               >
                 {device === "desktop" ? (
                   <>
-                    <Monitor className="size-4" />
+                    <Monitor className="size-3.5" />
                     Desktop
                   </>
                 ) : (
                   <>
-                    <Smartphone className="size-4" />
+                    <Smartphone className="size-3.5" />
                     Mobile
                   </>
                 )}
@@ -138,7 +142,7 @@ export function AppEditorHeader({
                 variant="bordered"
                 className="h-7 px-2! overflow-hidden gap-0"
               >
-                <ExternalLink className="size-4 shrink-0" />
+                <ExternalLink className="size-3.5 shrink-0" />
                 <motion.span
                   initial={false}
                   animate={{

components/editor/index.tsx

@@ -128,6 +128,7 @@ export function AppEditor({
                   projectName={projectName}
                   initialPrompt={initialPrompt}
                   files={files}
+                  medias={project?.medias ?? []}
                   onToggleMobileTab={setMobileTab}
                 />
               </div>

lib/prompts.ts

@@ -6,7 +6,7 @@ export const SEARCH_START = "=== SEARCH";
 export const DIVIDER = "=======";
 export const REPLACE_END = "=== REPLACE";
 
-// todo: rework follow up prompt, take a look at what I did on the v3 version, was working better.
+// following prompt doesnt work well. what it does sometimes it to use the START_FILE_CONTENT and END_FILE_CONTENT markers with comments which says "keep original part here", which is not correct, it should use SEARCH/REPLACE format instead.
 
 export const PROMPT_FOR_IMAGE_GENERATION = `
 === IMAGE PLACEHOLDER ===

lib/utils.ts

@@ -57,7 +57,8 @@ export const getContextFilesFromPrompt = async (
 ) => {
   const mentions = prompt.match(/file:\/[a-zA-Z0-9-_.\/]+/g);
   const filesToUseAsContext: File[] = [];
-  if (currentFiles.length === 0) return filesToUseAsContext;
+  if (currentFiles.length === 0) return currentFiles;
+  if (!mentions || mentions.length === 0) return currentFiles;
   mentions?.forEach((mention) => {
     const filePath = mention.replace("file:/", "");
     const matchedFile = currentFiles.find((file) => file.path === filePath);
@@ -141,3 +142,18 @@ export const humanizeNumber = (num: number): string => {
   }
   return num.toString();
 };
+
+export const getFileType = (url: string) => {
+  if (typeof url !== "string") {
+    return "unknown";
+  }
+  const extension = url.split(".").pop()?.toLowerCase();
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension || "")) {
+    return "image";
+  } else if (["mp4", "webm", "ogg", "avi", "mov"].includes(extension || "")) {
+    return "video";
+  } else if (["mp3", "wav", "ogg", "aac", "m4a"].includes(extension || "")) {
+    return "audio";
+  }
+  return "unknown";
+};