feat: initial commit

src/components/MagikaProcess.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Loader } from "@/components/ui/loader";
+
+//@ts-ignore
+import { Magika } from "magika";
+import { listen } from "@tauri-apps/api/event";
+import { useEffect, useState } from "react";
+import { readFile } from "@tauri-apps/plugin-fs";
+//@ts-ignore
+import { open } from "@tauri-apps/plugin-dialog";
+import { columns } from "@/components/DT/columns";
+import { DataTable } from "@/components/DT/data-table";
+
+const MagikaProcess = () => {
+    const [loading, setLoading] = useState(false);
+    const [predictions, setPredictions] = useState<any[]>([]);
+
+    useEffect(() => {
+        if (loading) return;
+        const unlisten = listen(
+            "tauri://file-drop",
+            async ({ payload }: any) => {
+                setLoading(true);
+                const filepaths: string[] = payload.paths;
+                const filepredictions: any[] = [];
+
+                for await (const filepath of filepaths) {
+                    const prediction = await getPrediction(filepath);
+                    filepredictions.push(prediction);
+                }
+
+                setPredictions(filepredictions);
+                setLoading(false);
+            }
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const getPrediction = async (filepath: string) => {
+        try {
+            const fileBytes = await readFile(filepath);
+            const magika = new Magika();
+            await magika.load({});
+            const prediction = await magika.identifyBytes(fileBytes);
+            prediction.path = filepath;
+            return prediction;
+        } catch (e) {
+            console.error(
+                `Error while getting prediction for ${filepath}: ${e}`
+            );
+        }
+    };
+
+    const handleClick = async () => {
+        // Open a selection dialog for files
+        const selected = await open({
+            multiple: true,
+        });
+        setLoading(true);
+        if (Array.isArray(selected)) {
+            // user selected multiple files
+            const filePredictions: any[] = [];
+            for await (const file of selected) {
+                const prediction = await getPrediction(file.path);
+                filePredictions.push(prediction);
+            }
+            setPredictions(filePredictions);
+        } else if (selected === null) {
+            // user cancelled the selection
+            console.log("User cancelled selection");
+        } else {
+            // user selected a single file
+            const { label, score }: { label: string; score: number } = selected;
+            setPredictions([{ label: label, score: score }]);
+        }
+        setLoading(false);
+    };
+
+    return (
+        <div
+            className={`flex h-full min-h-[100vh] w-full items-center justify-center text-center lg:m-8 ${
+                predictions.length > 0 && "m-16"
+            }`}
+        >
+            <div className="w-fit">
+                <div className="flex flex-col items-center justify-center pb-4">
+                    <h2 className="scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0">
+                        fformat
+                    </h2>
+                    <p className="text-md w-fit border-b text-muted-foreground">
+                        Examine file formats
+                    </p>
+                </div>
+                <div className="mb-4">
+                    <div className="mx-auto grid w-fit items-center gap-1.5">
+                        <Button
+                            disabled={loading}
+                            onClick={async () => await handleClick()}
+                        >
+                            Choose file(s){" "}
+                            {loading && (
+                                <Loader className="ml-2 w-4 animate-spin" />
+                            )}
+                        </Button>
+                    </div>
+                    <p className="text-md text-muted-foreground">
+                        or drag and drop
+                    </p>
+                </div>
+                {predictions.length > 0 && (
+                    <DataTable columns={columns} data={predictions} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default MagikaProcess;