Upload folder using huggingface_hub

.gitignore

@@ -20,6 +20,9 @@ dist-ssr
 .wrangler/
 .dev.vars
 
+# Tags directory
+/tags
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

.wrangler/deploy/config.json

@@ -0,0 +1 @@
+{"configPath":"../../.output/server/wrangler.json"}

README.md

@@ -5,7 +5,7 @@ colorFrom: indigo
 colorTo: purple
 sdk: docker
 app_port: 7860
-pinned: true
+pinned: false
 ---
 
 # Imageboard Grabber

_gitdownloads_grabberintanstack.rar

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86481e353a158233c09a61b81ee1cfe587d33dca34cc8d17a5cb9248e73c98b9
-size 131
+oid sha256:5af4f4a4d381b9864b7010b25efa6ba2dd18316a0b1210ca79f160b05f121e32
+size 128

src/lib/grabber/search.functions.ts

@@ -36,6 +36,8 @@ const InputSchema = z.object({
   tags: z.string().default(""),
   page: z.number().int().min(1).default(1),
   limit: z.number().int().min(1).max(200).default(40),
+  login: z.string().optional(),
+  apiKey: z.string().optional(),
 });
 
 export type SearchResult = {
@@ -46,13 +48,20 @@ export type SearchResult = {
 export const searchPosts = createServerFn({ method: "POST" })
   .inputValidator((input: unknown) => InputSchema.parse(input))
   .handler(async ({ data }): Promise<SearchResult> => {
-    const { site, tags, page, limit } = data;
+    const { site, tags, page, limit, login, apiKey } = data;
     const pageParam = (site.pageStartsAt ?? 1) === 0 ? page - 1 : page;
     const url = new URL(site.searchPath, site.baseUrl);
     url.searchParams.set(site.params.tags, tags);
     url.searchParams.set(site.params.page, String(pageParam));
     url.searchParams.set(site.params.limit, String(limit));
 
+    if (login) {
+      url.searchParams.set("login", login);
+    }
+    if (apiKey) {
+      url.searchParams.set("api_key", apiKey);
+    }
+
     try {
       const res = await fetch(url.toString(), {
         headers: {

src/lib/grabber/tag-cache.ts

@@ -0,0 +1,155 @@
+import fs from "fs";
+import path from "path";
+import zlib from "zlib";
+
+export interface TagItem {
+  name: string;
+  count: number;
+}
+
+// In-memory cache for loaded tag files
+const tagCache: Record<string, TagItem[]> = {};
+
+const TAGS_DIR = path.join(process.cwd(), "tags");
+
+// Ensure the tags directory exists
+if (!fs.existsSync(TAGS_DIR)) {
+  fs.mkdirSync(TAGS_DIR, { recursive: true });
+}
+
+export function listTagFiles(): string[] {
+  try {
+    if (!fs.existsSync(TAGS_DIR)) return [];
+    return fs.readdirSync(TAGS_DIR).filter((file) => file.endsWith(".csv"));
+  } catch (err) {
+    console.error("Error listing tag files:", err);
+    return [];
+  }
+}
+
+export function getTagsFromFile(filename: string): TagItem[] {
+  const safeFilename = path.basename(filename);
+  if (tagCache[safeFilename]) {
+    return tagCache[safeFilename];
+  }
+
+  const filePath = path.join(TAGS_DIR, safeFilename);
+  if (!fs.existsSync(filePath)) {
+    return [];
+  }
+
+  try {
+    console.log(`Loading tags from ${filePath}...`);
+    const content = fs.readFileSync(filePath, "utf-8");
+    const lines = content.split(/\r?\n/);
+    const tags: TagItem[] = [];
+
+    // Skip header line (id,name,category,post_count)
+    for (let i = 1; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (!line) continue;
+      
+      const commaIdx1 = line.indexOf(",");
+      if (commaIdx1 === -1) continue;
+      const commaIdx2 = line.indexOf(",", commaIdx1 + 1);
+      if (commaIdx2 === -1) continue;
+      const commaIdx3 = line.indexOf(",", commaIdx2 + 1);
+      
+      const name = line.substring(commaIdx1 + 1, commaIdx2);
+      const countStr = commaIdx3 === -1 
+        ? line.substring(commaIdx2 + 1)
+        : line.substring(commaIdx2 + 1, commaIdx3);
+      const count = parseInt(countStr, 10) || 0;
+
+      if (name) {
+        tags.push({ name, count });
+      }
+    }
+
+    console.log(`Successfully loaded ${tags.length} tags from ${safeFilename}.`);
+    tagCache[safeFilename] = tags;
+    return tags;
+  } catch (err) {
+    console.error(`Error reading tag file ${safeFilename}:`, err);
+    return [];
+  }
+}
+
+export function autocompleteTags(filename: string, query: string, limit = 20): TagItem[] {
+  const tags = getTagsFromFile(filename);
+  if (!tags.length) return [];
+
+  const lowerQuery = query.toLowerCase();
+  const matches: TagItem[] = [];
+
+  // Filter tags that start with the query
+  for (const tag of tags) {
+    if (tag.name.toLowerCase().startsWith(lowerQuery)) {
+      matches.push(tag);
+    }
+  }
+
+  // Sort matched tags by count descending
+  matches.sort((a, b) => b.count - a.count);
+
+  if (matches.length < limit) {
+    // If not enough startWith matches, find contains matches
+    const containsMatches: TagItem[] = [];
+    for (const tag of tags) {
+      const lowerName = tag.name.toLowerCase();
+      if (lowerName.includes(lowerQuery) && !lowerName.startsWith(lowerQuery)) {
+        containsMatches.push(tag);
+      }
+    }
+    containsMatches.sort((a, b) => b.count - a.count);
+    matches.push(...containsMatches);
+  }
+
+  return matches.slice(0, limit);
+}
+
+export async function downloadTagFile(urlStr: string): Promise<{ success: boolean; filename: string }> {
+  const url = new URL(urlStr);
+  let originalFilename = path.basename(url.pathname);
+  if (!originalFilename || originalFilename === "/" || !originalFilename.includes(".")) {
+    originalFilename = `downloaded-tags-${Date.now()}.csv`;
+  }
+
+  const isGz = originalFilename.endsWith(".gz") || urlStr.includes(".gz");
+  let targetFilename = originalFilename;
+  if (isGz && targetFilename.endsWith(".gz")) {
+    targetFilename = targetFilename.slice(0, -3); // remove .gz
+  }
+  if (!targetFilename.endsWith(".csv")) {
+    targetFilename += ".csv";
+  }
+
+  const response = await fetch(urlStr);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch tag file: HTTP ${response.status}`);
+  }
+
+  const arrayBuffer = await response.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+
+  const targetPath = path.join(TAGS_DIR, targetFilename);
+
+  if (isGz) {
+    return new Promise((resolve, reject) => {
+      zlib.gunzip(buffer, (err, decompressed) => {
+        if (err) {
+          reject(new Error(`Failed to decompress gz file: ${err.message}`));
+          return;
+        }
+        fs.writeFileSync(targetPath, decompressed);
+        // Clear old cache if existed
+        delete tagCache[targetFilename];
+        resolve({ success: true, filename: targetFilename });
+      });
+    });
+  } else {
+    fs.writeFileSync(targetPath, buffer);
+    delete tagCache[targetFilename];
+    return { success: true, filename: targetFilename };
+  }
+}

src/routeTree.gen.ts

@@ -10,6 +10,8 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiUploadToDatasetRouteImport } from './routes/api/upload-to-dataset'
+import { Route as ApiTagsRouteImport } from './routes/api/tags'
 import { Route as ApiDownloadZipRouteImport } from './routes/api/download-zip'
 
 const IndexRoute = IndexRouteImport.update({
@@ -17,6 +19,16 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiUploadToDatasetRoute = ApiUploadToDatasetRouteImport.update({
+  id: '/api/upload-to-dataset',
+  path: '/api/upload-to-dataset',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiTagsRoute = ApiTagsRouteImport.update({
+  id: '/api/tags',
+  path: '/api/tags',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiDownloadZipRoute = ApiDownloadZipRouteImport.update({
   id: '/api/download-zip',
   path: '/api/download-zip',
@@ -26,27 +38,40 @@ const ApiDownloadZipRoute = ApiDownloadZipRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/api/download-zip': typeof ApiDownloadZipRoute
+  '/api/tags': typeof ApiTagsRoute
+  '/api/upload-to-dataset': typeof ApiUploadToDatasetRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/api/download-zip': typeof ApiDownloadZipRoute
+  '/api/tags': typeof ApiTagsRoute
+  '/api/upload-to-dataset': typeof ApiUploadToDatasetRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/api/download-zip': typeof ApiDownloadZipRoute
+  '/api/tags': typeof ApiTagsRoute
+  '/api/upload-to-dataset': typeof ApiUploadToDatasetRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/api/download-zip'
+  fullPaths: '/' | '/api/download-zip' | '/api/tags' | '/api/upload-to-dataset'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/api/download-zip'
-  id: '__root__' | '/' | '/api/download-zip'
+  to: '/' | '/api/download-zip' | '/api/tags' | '/api/upload-to-dataset'
+  id:
+    | '__root__'
+    | '/'
+    | '/api/download-zip'
+    | '/api/tags'
+    | '/api/upload-to-dataset'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ApiDownloadZipRoute: typeof ApiDownloadZipRoute
+  ApiTagsRoute: typeof ApiTagsRoute
+  ApiUploadToDatasetRoute: typeof ApiUploadToDatasetRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -58,6 +83,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/upload-to-dataset': {
+      id: '/api/upload-to-dataset'
+      path: '/api/upload-to-dataset'
+      fullPath: '/api/upload-to-dataset'
+      preLoaderRoute: typeof ApiUploadToDatasetRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/tags': {
+      id: '/api/tags'
+      path: '/api/tags'
+      fullPath: '/api/tags'
+      preLoaderRoute: typeof ApiTagsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/download-zip': {
       id: '/api/download-zip'
       path: '/api/download-zip'
@@ -71,7 +110,19 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ApiDownloadZipRoute: ApiDownloadZipRoute,
+  ApiTagsRoute: ApiTagsRoute,
+  ApiUploadToDatasetRoute: ApiUploadToDatasetRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { startInstance } from './start.ts'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
+  }
+}

src/routes/api/download-zip.ts

@@ -25,6 +25,7 @@ const BodySchema = z.object({
   siteName: z.string().default("grabber"),
   posts: z.array(PostSchema).min(1).max(200),
   excludeTags: z.array(z.string()).default([]),
+  zipName: z.string().optional(),
 });
 
 function sanitize(s: string) {
@@ -147,12 +148,23 @@ export const Route = createFileRoute("/api/download-zip")({
         }
 
         const zipped = zipSync(files, { level: 0 });
-        const ts = new Date().toISOString().replace(/[:.]/g, "-");
+        
+        let finalZipName = "";
+        if (body.zipName && body.zipName.trim()) {
+          finalZipName = sanitize(body.zipName.trim());
+          if (!finalZipName.endsWith(".zip")) {
+            finalZipName += ".zip";
+          }
+        } else {
+          const ts = new Date().toISOString().replace(/[:.]/g, "-");
+          finalZipName = `grabber-${ts}.zip`;
+        }
+
         return new Response(zipped, {
           status: 200,
           headers: {
             "Content-Type": "application/zip",
-            "Content-Disposition": `attachment; filename="grabber-${ts}.zip"`,
+            "Content-Disposition": `attachment; filename="${finalZipName}"`,
             "Cache-Control": "no-store",
           },
         });

src/routes/api/tags.ts

@@ -0,0 +1,64 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { listTagFiles, autocompleteTags, downloadTagFile } from "@/lib/grabber/tag-cache";
+
+const PostBodySchema = z.object({
+  downloadUrl: z.string().url("Invalid download URL"),
+});
+
+export const Route = createFileRoute("/api/tags")({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        const url = new URL(request.url);
+        const action = url.searchParams.get("action");
+
+        if (action === "list") {
+          const files = listTagFiles();
+          return new Response(JSON.stringify({ success: true, files }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        }
+
+        if (action === "autocomplete") {
+          const query = url.searchParams.get("query") || "";
+          const file = url.searchParams.get("file") || "tags-selected.csv";
+          const limitParam = url.searchParams.get("limit");
+          const limit = limitParam ? parseInt(limitParam, 10) || 20 : 20;
+
+          const suggestions = autocompleteTags(file, query, limit);
+          return new Response(JSON.stringify({ success: true, suggestions }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        }
+
+        return new Response(JSON.stringify({ error: "Invalid action. Supported actions: list, autocomplete" }), {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        });
+      },
+
+      POST: async ({ request }) => {
+        try {
+          const body = PostBodySchema.parse(await request.json());
+          const result = await downloadTagFile(body.downloadUrl);
+          
+          return new Response(JSON.stringify({ success: true, filename: result.filename }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+          });
+        } catch (err) {
+          return new Response(
+            JSON.stringify({ error: err instanceof Error ? err.message : "Failed to download tag file" }),
+            {
+              status: 400,
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+        }
+      },
+    },
+  },
+});

src/routes/api/upload-to-dataset.ts

@@ -29,6 +29,8 @@ const BodySchema = z.object({
   excludeTags: z.array(z.string()).default([]),
   hfToken: z.string().min(1, "HF token is required"),
   datasetName: z.string().min(1, "Dataset name is required"),
+  zipName: z.string().optional(),
+  subfolder: z.string().optional(),
 });
 
 function sanitize(s: string) {
@@ -149,10 +151,33 @@ export const Route = createFileRoute("/api/upload-to-dataset")({
         // Build ZIP Sync
         const zipped = zipSync(files, { level: 0 });
         const ts = new Date().toISOString().replace(/[:.]/g, "-");
-        const filename = `grabber-${ts}.zip`;
+        
+        let filename = "";
+        if (body.zipName && body.zipName.trim()) {
+          filename = sanitize(body.zipName.trim());
+          if (!filename.endsWith(".zip")) {
+            filename += ".zip";
+          }
+        } else {
+          filename = `grabber-${ts}.zip`;
+        }
+
+        let pathInRepo = filename;
+        if (body.subfolder && body.subfolder.trim()) {
+          const cleanSubfolder = body.subfolder
+            .trim()
+            .split("/")
+            .map((p) => p.trim())
+            .filter(Boolean)
+            .join("/");
+          if (cleanSubfolder) {
+            pathInRepo = `${cleanSubfolder}/${filename}`;
+          }
+        }
 
-        // Temporary paths
-        const zipPath = `/tmp/${filename}`;
+        // Temporary paths - use safe name for local file
+        const safeLocalFilename = `${ts}_${sanitize(filename)}`;
+        const zipPath = `/tmp/${safeLocalFilename}`;
         const pyScriptPath = `/tmp/hf_dataset_upload_${ts}.py`;
 
         try {
@@ -193,10 +218,10 @@ except Exception as e:
 
           // Execute python helper to create/upload the dataset
           execSync(
-            `python3 "${pyScriptPath}" "${body.hfToken}" "${body.datasetName}" "${zipPath}" "${filename}"`,
+            `python3 "${pyScriptPath}" "${body.hfToken}" "${body.datasetName}" "${zipPath}" "${pathInRepo}"`,
           );
 
-          return new Response(JSON.stringify({ success: true, filename }), {
+          return new Response(JSON.stringify({ success: true, filename: pathInRepo }), {
             status: 200,
             headers: { "Content-Type": "application/json" },
           });

src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -52,12 +52,192 @@ function Grabber() {
   const [datasetName, setDatasetName] = useState("");
   const [uploading, setUploading] = useState(false);
   const [uploadStatus, setUploadStatus] = useState("");
+  const [customFilename, setCustomFilename] = useState("");
+  const [customSubfolder, setCustomSubfolder] = useState("");
+
+  const [e621Username, setE621Username] = useState("");
+  const [e621ApiKey, setE621ApiKey] = useState("");
+
+  const [autocompleteEnabled, setAutocompleteEnabled] = useState(true);
+  const [activeTagFile, setActiveTagFile] = useState("tags-selected.csv");
+  const [availableTagFiles, setAvailableTagFiles] = useState<string[]>([]);
+  const [newTagFileUrl, setNewTagFileUrl] = useState("");
+  const [downloadingTagFile, setDownloadingTagFile] = useState(false);
+  const [tagSuggestions, setTagSuggestions] = useState<{ name: string; count: number }[]>([]);
+  const [activeWordInfo, setActiveWordInfo] = useState<{ word: string; start: number; end: number } | null>(null);
+  const [focusedSuggestionIdx, setFocusedSuggestionIdx] = useState(-1);
+
+  const fetchTagFiles = async () => {
+    try {
+      const res = await fetch("/api/tags?action=list");
+      const data = await res.json();
+      if (data.success && Array.isArray(data.files)) {
+        setAvailableTagFiles(data.files);
+        if (data.files.length > 0 && !data.files.includes(activeTagFile)) {
+          // Default to tags-selected.csv if available
+          if (data.files.includes("tags-selected.csv")) {
+            setActiveTagFile("tags-selected.csv");
+          } else {
+            setActiveTagFile(data.files[0]);
+          }
+        }
+      }
+    } catch (err) {
+      console.error("Failed to list tag files:", err);
+    }
+  };
+
+  const handleDownloadTagFile = async () => {
+    if (!newTagFileUrl.trim()) return;
+    setDownloadingTagFile(true);
+    try {
+      const res = await fetch("/api/tags", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ downloadUrl: newTagFileUrl.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        alert(`Error: ${data.error}`);
+      } else {
+        alert(`Successfully downloaded and decompressed ${data.filename}!`);
+        setNewTagFileUrl("");
+        await fetchTagFiles();
+        setActiveTagFile(data.filename);
+      }
+    } catch (err) {
+      alert(`Download failed: ${err instanceof Error ? err.message : "unknown error"}`);
+    } finally {
+      setDownloadingTagFile(false);
+    }
+  };
+
+  const updateActiveWord = (el: HTMLInputElement) => {
+    const val = el.value;
+    const pos = el.selectionStart;
+    if (pos === null || !autocompleteEnabled) {
+      setTagSuggestions([]);
+      setActiveWordInfo(null);
+      return;
+    }
+
+    // Find start and end of word under cursor
+    let start = pos;
+    while (start > 0 && !/\s/.test(val[start - 1])) {
+      start--;
+    }
+    let end = pos;
+    while (end < val.length && !/\s/.test(val[end])) {
+      end++;
+    }
+
+    const word = val.slice(start, end).trim();
+    // Exclude colon commands like rating:safe
+    if (word && !word.includes(":")) {
+      setActiveWordInfo({ word, start, end });
+    } else {
+      setTagSuggestions([]);
+      setActiveWordInfo(null);
+    }
+  };
+
+  const selectSuggestion = (tagName: string) => {
+    if (!activeWordInfo) return;
+    const before = tags.slice(0, activeWordInfo.start);
+    const after = tags.slice(activeWordInfo.end);
+    
+    // Replace word and add a trailing space
+    const newTags = before + tagName + " " + (after.trim() ? after : "");
+    setTags(newTags);
+    setTagSuggestions([]);
+    setActiveWordInfo(null);
+
+    // Refocus input and place cursor after inserted word + space
+    const inputEl = document.getElementById("search-tags-input") as HTMLInputElement;
+    if (inputEl) {
+      inputEl.focus();
+      const cursorTarget = before.length + tagName.length + 1;
+      setTimeout(() => {
+        inputEl.setSelectionRange(cursorTarget, cursorTarget);
+      }, 0);
+    }
+  };
+
+  const handleAutocompleteKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (tagSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedSuggestionIdx((prev) => (prev + 1) % tagSuggestions.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedSuggestionIdx((prev) => (prev - 1 + tagSuggestions.length) % tagSuggestions.length);
+      } else if (e.key === "Enter") {
+        if (focusedSuggestionIdx >= 0 && focusedSuggestionIdx < tagSuggestions.length) {
+          e.preventDefault();
+          selectSuggestion(tagSuggestions[focusedSuggestionIdx].name);
+        } else {
+          runSearch(1);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setTagSuggestions([]);
+        setActiveWordInfo(null);
+      }
+    } else {
+      if (e.key === "Enter") {
+        runSearch(1);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setE621Username(localStorage.getItem("e621_username") || "");
+      setE621ApiKey(localStorage.getItem("e621_api_key") || "");
+    }
+    fetchTagFiles();
+  }, []);
+
+  useEffect(() => {
+    if (!autocompleteEnabled || !activeWordInfo || !activeWordInfo.word) {
+      setTagSuggestions([]);
+      return;
+    }
+
+    const delay = setTimeout(async () => {
+      try {
+        const res = await fetch(
+          `/api/tags?action=autocomplete&query=${encodeURIComponent(
+            activeWordInfo.word
+          )}&file=${encodeURIComponent(activeTagFile)}&limit=15`
+        );
+        const data = await res.json();
+        if (data.success && Array.isArray(data.suggestions)) {
+          setTagSuggestions(data.suggestions);
+          setFocusedSuggestionIdx(-1);
+        }
+      } catch (err) {
+        console.error("Autocomplete fetch failed:", err);
+      }
+    }, 150);
+
+    return () => clearTimeout(delay);
+  }, [activeWordInfo, activeTagFile, autocompleteEnabled]);
 
   const site = useMemo(() => sites.find((s) => s.id === siteId) ?? sites[0], [sites, siteId]);
 
   const searchMut = useMutation({
     mutationFn: async (vars: { page: number }) => {
-      return await searchPosts({ data: { site, tags, page: vars.page, limit } });
+      return await searchPosts({
+        data: {
+          site,
+          tags,
+          page: vars.page,
+          limit,
+          login: site.id === "e621" ? e621Username : undefined,
+          apiKey: site.id === "e621" ? e621ApiKey : undefined,
+        },
+      });
     },
   });
 
@@ -99,6 +279,7 @@ function Grabber() {
             .split(/\s+|,/)
             .map((t) => t.trim().toLowerCase())
             .filter(Boolean),
+          zipName: customFilename.trim() || undefined,
         }),
       });
       if (!res.ok) {
@@ -110,7 +291,18 @@ function Grabber() {
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `grabber-${site.id}-${Date.now()}.zip`;
+      
+      let finalName = "";
+      if (customFilename.trim()) {
+        finalName = customFilename.trim();
+        if (!finalName.endsWith(".zip")) {
+          finalName += ".zip";
+        }
+      } else {
+        finalName = `grabber-${site.id}-${Date.now()}.zip`;
+      }
+      
+      a.download = finalName;
       document.body.appendChild(a);
       a.click();
       a.remove();
@@ -145,6 +337,8 @@ function Grabber() {
             .filter(Boolean),
           hfToken: hfToken.trim(),
           datasetName: datasetName.trim(),
+          zipName: customFilename.trim() || undefined,
+          subfolder: customSubfolder.trim() || undefined,
         }),
       });
       const data = await res.json();
@@ -197,13 +391,49 @@ function Grabber() {
           </Button>
         </div>
         <div className="max-w-7xl mx-auto px-4 pb-3 flex gap-2 flex-wrap items-center">
-          <Input
-            placeholder="tags (e.g. rating:safe fluffy)"
-            value={tags}
-            onChange={(e) => setTags(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && runSearch(1)}
-            className="flex-1 min-w-64"
-          />
+          <div className="relative flex-1 min-w-64 z-20">
+            <Input
+              id="search-tags-input"
+              placeholder="tags (e.g. rating:safe fluffy)"
+              value={tags}
+              onChange={(e) => {
+                setTags(e.target.value);
+                updateActiveWord(e.target);
+              }}
+              onKeyUp={(e) => updateActiveWord(e.currentTarget)}
+              onSelect={(e) => updateActiveWord(e.currentTarget)}
+              onFocus={(e) => updateActiveWord(e.currentTarget)}
+              onBlur={() => {
+                // Short timeout to allow clicking suggestion buttons
+                setTimeout(() => {
+                  setTagSuggestions([]);
+                  setActiveWordInfo(null);
+                }, 200);
+              }}
+              onKeyDown={handleAutocompleteKeyDown}
+              className="w-full font-sans text-sm"
+              autoComplete="off"
+            />
+            {tagSuggestions.length > 0 && (
+              <div className="absolute left-0 right-0 top-full mt-1 max-h-60 overflow-y-auto bg-popover text-popover-foreground border rounded-md shadow-lg z-50">
+                {tagSuggestions.map((suggestion, idx) => (
+                  <button
+                    key={suggestion.name}
+                    type="button"
+                    className={`w-full text-left px-3 py-1.5 text-xs flex justify-between items-center transition hover:bg-accent hover:text-accent-foreground ${
+                      idx === focusedSuggestionIdx ? "bg-accent text-accent-foreground" : ""
+                    }`}
+                    onClick={() => selectSuggestion(suggestion.name)}
+                  >
+                    <span className="font-medium">{suggestion.name}</span>
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {suggestion.count.toLocaleString()}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
           <Input
             type="number"
             min={1}
@@ -244,7 +474,13 @@ function Grabber() {
           </Button>
           <span className="text-sm text-muted-foreground">selected: {selected.size}</span>
           <Input
-            placeholder="Exclude tags from ZIP (e.g. fluffy, safety)"
+            placeholder="Custom ZIP / Filename"
+            value={customFilename}
+            onChange={(e) => setCustomFilename(e.target.value)}
+            className="w-64 max-w-xs"
+          />
+          <Input
+            placeholder="Exclude tags from ZIP"
             value={excludeTags}
             onChange={(e) => setExcludeTags(e.target.value)}
             className="w-64 max-w-xs"
@@ -259,6 +495,92 @@ function Grabber() {
           </Button>
         </div>
 
+        {/* e621 Authentication Panel */}
+        {siteId === "e621" && (
+          <div className="max-w-7xl mx-auto px-4 pb-3 flex gap-2 flex-wrap items-center border-t pt-3 mt-1 bg-muted/20">
+            <span className="font-semibold text-xs text-muted-foreground mr-1 uppercase tracking-wider">
+              e621 Authentication:
+            </span>
+            <Input
+              placeholder="Username"
+              value={e621Username}
+              onChange={(e) => {
+                setE621Username(e.target.value);
+                localStorage.setItem("e621_username", e.target.value);
+              }}
+              className="w-48 max-w-xs"
+            />
+            <Input
+              type="password"
+              placeholder="API Key"
+              value={e621ApiKey}
+              onChange={(e) => {
+                setE621ApiKey(e.target.value);
+                localStorage.setItem("e621_api_key", e.target.value);
+              }}
+              className="w-48 max-w-xs"
+            />
+            <span className="text-xs text-muted-foreground italic">
+              (Credentials stored only in your local browser storage)
+            </span>
+          </div>
+        )}
+
+        {/* Autocomplete Settings Panel */}
+        <div className="max-w-7xl mx-auto px-4 pb-3 flex gap-2 flex-wrap items-center border-t pt-3 mt-1 bg-muted/20">
+          <span className="font-semibold text-xs text-muted-foreground mr-1 uppercase tracking-wider">
+            Autocomplete Settings:
+          </span>
+          <div className="flex items-center gap-2 mr-4">
+            <label htmlFor="autocomplete-toggle" className="text-xs font-medium cursor-pointer">
+              ON
+            </label>
+            <Checkbox
+              id="autocomplete-toggle"
+              checked={autocompleteEnabled}
+              onCheckedChange={(checked) => setAutocompleteEnabled(!!checked)}
+            />
+          </div>
+          {autocompleteEnabled && availableTagFiles.length > 0 && (
+            <>
+              <span className="text-xs text-muted-foreground mr-1">Tags File:</span>
+              <Select value={activeTagFile} onValueChange={setActiveTagFile}>
+                <SelectTrigger className="w-48 h-9 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableTagFiles.map((file) => (
+                    <SelectItem key={file} value={file} className="text-xs">
+                      {file}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+          <span className="text-xs text-muted-foreground ml-2 mr-1">Download Tags Link:</span>
+          <Input
+            placeholder="https://.../tags.csv.gz"
+            value={newTagFileUrl}
+            onChange={(e) => setNewTagFileUrl(e.target.value)}
+            className="w-64 max-w-xs h-9 text-xs"
+          />
+          <Button
+            onClick={handleDownloadTagFile}
+            disabled={downloadingTagFile || !newTagFileUrl.trim()}
+            variant="outline"
+            size="sm"
+            className="h-9 text-xs"
+          >
+            {downloadingTagFile ? (
+              <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+            ) : (
+              <Download className="w-3 h-3 mr-1" />
+            )}
+            Download
+          </Button>
+        </div>
+
         {/* Hugging Face Dataset Integration Panel */}
         <div className="max-w-7xl mx-auto px-4 pb-3 flex gap-2 flex-wrap items-center border-t pt-3 mt-1 bg-muted/20">
           <span className="font-semibold text-xs text-muted-foreground mr-1 uppercase tracking-wider">
@@ -277,6 +599,12 @@ function Grabber() {
             onChange={(e) => setDatasetName(e.target.value)}
             className="w-64 max-w-xs"
           />
+          <Input
+            placeholder="Custom Subfolder Path (optional)"
+            value={customSubfolder}
+            onChange={(e) => setCustomSubfolder(e.target.value)}
+            className="w-64 max-w-xs"
+          />
           <Button
             onClick={uploadToDataset}
             disabled={!selected.size || uploading || !hfToken.trim() || !datasetName.trim()}