@tomako/tools-runtime 0.1.0

package/src/features/tools/twitter-gif-downloader/widget/twitter-gif-downloader.tsx

@@ -0,0 +1,351 @@
+"use client";
+
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util";
+import {
+    AlertCircle,
+    CheckCircle2,
+    Download,
+    FileVideo2,
+    Loader2,
+    RotateCcw,
+} from "lucide-react";
+import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input } from "@tomako/ui/input";
+import { ProgressBar } from "@tomako/ui/progress";
+import { useTranslations } from "../../../../i18n/client";
+
+type Phase = "idle" | "looking-up" | "loading-engine" | "converting" | "done" | "error";
+
+type MediaItem = {
+  url: string;
+  thumbnailUrl?: string;
+  type?: string;
+  width?: number;
+  height?: number;
+};
+
+type Result = {
+  tweetId: string;
+  tweetUrl: string;
+  authorName?: string;
+  authorHandle?: string;
+  text?: string;
+  media: MediaItem;
+  gifUrl: string;
+  mp4Url: string;
+};
+
+type VxTwitterResponse = {
+  success: boolean;
+  tweet?: {
+    id?: string;
+    url?: string;
+    authorName?: string;
+    authorHandle?: string;
+    text?: string;
+  };
+  media?: MediaItem;
+};
+
+const FFMPEG_CORE_VERSION = "0.12.10";
+const FFMPEG_BASE_URL = `https://unpkg.com/@ffmpeg/core@${FFMPEG_CORE_VERSION}/dist/umd`;
+const SAMPLE_URL = "https://twitter.com/d__raptis/status/1458761091195064325";
+
+function extractTweetId(input: string): string | null {
+  const trimmed = input.trim();
+  const match = trimmed.match(/(?:twitter\.com|x\.com)\/[^/]+\/status\/(\d{10,25})/i);
+  return match?.[1] ?? null;
+}
+
+function sanitizeFilePart(value: string): string {
+  return value
+    .trim()
+    .replace(/^@/, "")
+    .replace(/[^a-z0-9-_]+/gi, "-")
+    .replace(/^-+|-+$/g, "")
+    .toLowerCase();
+}
+
+function downloadUrl(url: string, filename: string) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+function mediaProxyUrl(mediaUrl: string): string {
+  return `/api/tools/twitter-gif-downloader?mediaUrl=${encodeURIComponent(mediaUrl)}`;
+}
+
+export function TwitterGifDownloader() {
+  const t = useTranslations("toolsPages.twitterGifDownloader.widget");
+  const [tweetUrl, setTweetUrl] = useState("");
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<Result | null>(null);
+  const [progress, setProgress] = useState(0);
+  const ffmpegRef = useRef<FFmpeg | null>(null);
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const gifUrlRef = useRef<string | null>(null);
+
+  const isBusy = phase === "looking-up" || phase === "loading-engine" || phase === "converting";
+  const parsedTweetId = useMemo(() => extractTweetId(tweetUrl), [tweetUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (gifUrlRef.current) URL.revokeObjectURL(gifUrlRef.current);
+    };
+  }, []);
+
+  async function loadFfmpeg(): Promise<FFmpeg> {
+    if (ffmpegRef.current?.loaded) return ffmpegRef.current;
+
+    setPhase("loading-engine");
+    setProgress(8);
+    const ffmpeg = new FFmpeg();
+    ffmpeg.on("progress", ({ progress: nextProgress }) => {
+      setProgress(Math.round(Math.min(0.96, Math.max(0.08, nextProgress)) * 100));
+    });
+
+    await ffmpeg.load({
+      coreURL: await toBlobURL(`${FFMPEG_BASE_URL}/ffmpeg-core.js`, "text/javascript"),
+      wasmURL: await toBlobURL(`${FFMPEG_BASE_URL}/ffmpeg-core.wasm`, "application/wasm"),
+    });
+
+    ffmpegRef.current = ffmpeg;
+    return ffmpeg;
+  }
+
+  async function convertToGif(mediaUrl: string): Promise<string> {
+    const ffmpeg = await loadFfmpeg();
+    setPhase("converting");
+    setProgress(18);
+
+    await ffmpeg.writeFile("input.mp4", await fetchFile(mediaUrl));
+    await ffmpeg.exec([
+      "-i",
+      "input.mp4",
+      "-vf",
+      "fps=12,scale='min(720,iw)':-1:flags=lanczos",
+      "-loop",
+      "0",
+      "out.gif",
+    ]);
+    const output = await ffmpeg.readFile("out.gif");
+
+    await Promise.allSettled([ffmpeg.deleteFile("input.mp4"), ffmpeg.deleteFile("out.gif")]);
+
+    if (gifUrlRef.current) URL.revokeObjectURL(gifUrlRef.current);
+    const bytes = typeof output === "string" ? new TextEncoder().encode(output) : output;
+    const gifBuffer = Uint8Array.from(bytes).buffer;
+    const gifUrl = URL.createObjectURL(new Blob([gifBuffer], { type: "image/gif" }));
+    gifUrlRef.current = gifUrl;
+    setProgress(100);
+    return gifUrl;
+  }
+
+  async function lookupTweetMedia(tweetId: string): Promise<VxTwitterResponse> {
+    const response = await fetch(`/api/tools/twitter-gif-downloader?tweetId=${tweetId}`, {
+      headers: { Accept: "application/json" },
+    });
+
+    if (!response.ok) {
+      throw new Error(t("lookupError"));
+    }
+
+    return (await response.json()) as VxTwitterResponse;
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setResult(null);
+    setProgress(0);
+
+    if (!parsedTweetId) {
+      setPhase("error");
+      setError(t("invalidUrl"));
+      return;
+    }
+
+    resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    try {
+      setPhase("looking-up");
+      setProgress(5);
+      const data = await lookupTweetMedia(parsedTweetId);
+      const media = data.media;
+
+      if (!media?.url) {
+        setPhase("error");
+        setError(t("noMedia"));
+        return;
+      }
+
+      const proxiedMediaUrl = mediaProxyUrl(media.url);
+      const gifUrl = await convertToGif(proxiedMediaUrl);
+      setResult({
+        tweetId: data.tweet?.id ?? parsedTweetId,
+        tweetUrl: data.tweet?.url ?? tweetUrl.trim(),
+        authorName: data.tweet?.authorName,
+        authorHandle: data.tweet?.authorHandle,
+        text: data.tweet?.text,
+        media,
+        gifUrl,
+        mp4Url: proxiedMediaUrl,
+      });
+      setPhase("done");
+    } catch (caught) {
+      console.error(caught);
+      setPhase("error");
+      setError(t("conversionError"));
+    }
+  }
+
+  function reset() {
+    setPhase("idle");
+    setError(null);
+    setResult(null);
+    setProgress(0);
+  }
+
+  const fileBase = result
+    ? `twitter-gif-${sanitizeFilePart(result.authorHandle || result.tweetId) || result.tweetId}`
+    : "twitter-gif";
+
+  return (
+    <section className="overflow-hidden rounded-[1.75rem] border border-[#D8D4CA] bg-white shadow-[0_24px_70px_rgba(17,17,17,0.08)]">
+      <div className="grid lg:grid-cols-[0.94fr_1.06fr]">
+        <form onSubmit={(event) => void submit(event)} className="bg-[#FFF5ED] p-5 md:p-7">
+          <div className="rounded-[1.35rem] border border-[#ECD8C8] bg-white/88 p-5 shadow-[0_18px_42px_rgba(92,58,36,0.08)] backdrop-blur md:p-6">
+              <div className="mb-6">
+                <p className="text-sm font-semibold text-[#111111]">{t("workspaceTitle")}</p>
+                <p className="mt-2 text-sm leading-6 text-[#555555]">{t("workspaceIntro")}</p>
+              </div>
+
+            <div className="grid gap-5">
+              <Field label={t("urlLabel")}>
+                <Input
+                  value={tweetUrl}
+                  onChange={(event) => setTweetUrl(event.target.value)}
+                  placeholder={SAMPLE_URL}
+                  className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] px-4 text-[15px] font-medium text-[#111111] placeholder:text-[#8A8478]"
+                  disabled={isBusy}
+                />
+              </Field>
+
+              <Button
+                type="submit"
+                size="lg"
+                className="w-full rounded-2xl bg-[#111111] text-white shadow-[0_14px_34px_rgba(17,17,17,0.18)] hover:bg-[#2A2A2A]"
+                  disabled={isBusy}
+                >
+                  {isBusy ? t("working") : t("submit")}
+                </Button>
+            </div>
+          </div>
+        </form>
+
+        <div ref={resultRef} className="bg-[#E8F5FF] p-5 md:p-7">
+          <div className="flex h-full min-h-[360px] flex-col justify-center rounded-[1.5rem] border border-[#CFE7F8] bg-white/84 p-5 shadow-[0_18px_54px_rgba(17,17,17,0.08)] md:p-6">
+            {phase === "idle" ? (
+              <div>
+                <span className="flex size-12 items-center justify-center rounded-full bg-[#075DF5] text-white">
+                  <FileVideo2 aria-hidden className="size-5" />
+                </span>
+                <h3 className="mt-5 text-2xl font-semibold text-[#111111]">{t("idleTitle")}</h3>
+                <p className="mt-3 text-sm leading-6 text-[#555555]">{t("idleBody")}</p>
+              </div>
+            ) : null}
+
+            {isBusy ? (
+              <div>
+                <span className="flex size-12 items-center justify-center rounded-full bg-[#111111] text-white">
+                  <Loader2 aria-hidden className="size-5 animate-spin" />
+                </span>
+                <h3 className="mt-5 text-2xl font-semibold text-[#111111]">
+                  {phase === "looking-up"
+                    ? t("lookupTitle")
+                    : phase === "loading-engine"
+                      ? t("engineTitle")
+                      : t("convertTitle")}
+                </h3>
+                <p className="mt-3 text-sm leading-6 text-[#555555]">{t("loadingBody")}</p>
+                <ProgressBar value={progress} className="mt-6 h-2 bg-[#E1DDD3]" />
+              </div>
+            ) : null}
+
+            {phase === "error" ? (
+              <div>
+                <span className="flex size-12 items-center justify-center rounded-full bg-[#FFF0E8] text-[#8A260F]">
+                  <AlertCircle aria-hidden className="size-5" />
+                </span>
+                <h3 className="mt-5 text-2xl font-semibold text-[#111111]">{t("errorTitle")}</h3>
+                <p className="mt-3 text-sm leading-6 text-[#555555]">{error}</p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="mt-6 rounded-2xl border-[#CFC9BC] bg-white"
+                  onClick={reset}
+                >
+                  <RotateCcw aria-hidden className="size-4" />
+                  {t("tryAgain")}
+                </Button>
+              </div>
+            ) : null}
+
+            {phase === "done" && result ? (
+              <div>
+                <div className="flex items-center gap-3">
+                  <span className="flex size-11 items-center justify-center rounded-full bg-[#B7FF3E] text-[#111111]">
+                    <CheckCircle2 aria-hidden className="size-5" />
+                  </span>
+                  <div>
+                    <h3 className="text-2xl font-semibold text-[#111111]">{t("doneTitle")}</h3>
+                    <p className="mt-1 text-sm text-[#555555]">
+                      {result.authorHandle ? `@${result.authorHandle}` : result.tweetId}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-5 overflow-hidden rounded-[1.25rem] border border-[#D8D4CA] bg-[#111111]">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={result.gifUrl} alt={t("previewAlt")} className="h-auto w-full" />
+                </div>
+
+                {result.text ? (
+                  <p className="mt-4 line-clamp-3 text-sm leading-6 text-[#555555]">{result.text}</p>
+                ) : null}
+
+                <div className="mt-6 grid gap-3 sm:grid-cols-2">
+                  <Button
+                    type="button"
+                    className="rounded-2xl bg-[#111111] text-white hover:bg-[#2A2A2A]"
+                    onClick={() => downloadUrl(result.gifUrl, `${fileBase}.gif`)}
+                  >
+                    <Download aria-hidden className="size-4" />
+                    {t("downloadGif")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="rounded-2xl border-[#CFC9BC] bg-white"
+                    onClick={() => downloadUrl(result.mp4Url, `${fileBase}.mp4`)}
+                  >
+                    <Download aria-hidden className="size-4" />
+                    {t("downloadMp4")}
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/features/tools/types.ts

@@ -0,0 +1,68 @@
+import type { ComponentType } from "react";
+
+import type { PartialLocaleRecord } from "../../i18n/locale-fallback";
+import type { AppLocale } from "../../i18n/locale";
+import type { ToolArchetype, WidgetMode } from "../../lib/tools/types";
+
+export type RequiredToolLocale = "zh" | "en";
+
+export type ToolStatus = "draft" | "review" | "published" | "deprecated";
+
+export interface ToolLocaleCopy {
+  title: string;
+  displayTitle?: string;
+  description: string;
+  intro?: string;
+  category: string;
+  keywords: string[];
+  inputSignal?: string;
+  outputSignal?: string;
+  boundarySignal?: string;
+}
+
+export interface ToolSeoMeta {
+  publishedAt?: string;
+  updatedAt: string;
+  readingTime: string;
+  featured?: boolean;
+  ogImage?: string;
+  /** Collection-card art can differ from the detail-page hero and social preview. */
+  cardImage?: string;
+}
+
+export type ToolRiskLevel = "low" | "medium" | "high";
+
+export interface ToolSpecExample {
+  label: string;
+  input: string;
+  expectedOutput: string;
+}
+
+export interface ToolCtaLink {
+  href: string;
+  label: string;
+}
+
+export interface ToolSpec {
+  slug: string;
+  toolType: ToolArchetype;
+  /** Legacy 迁移后由 i18n meta 注入；package 工具仍内嵌 */
+  locales?: PartialLocaleRecord<ToolLocaleCopy>;
+  seo: ToolSeoMeta;
+  riskLevel?: ToolRiskLevel;
+  /** Legacy 迁移后由 i18n toolsPages.{slug}.examples 承载 */
+  examples?: PartialLocaleRecord<ToolSpecExample[]>;
+  mcp?: { enabled: boolean; toolName?: string };
+  widget?: { id: string; mode: WidgetMode };
+}
+
+export interface ToolPageProps {
+  locale: AppLocale;
+  spec: ToolSpec;
+  clientMessages?: Record<string, unknown>;
+}
+
+export interface ToolModule {
+  spec: ToolSpec;
+  Container: ComponentType<ToolPageProps>;
+}