@trully/true-deepfake-detection-next12 v1.2.0

TrueDeepfakeDetection Next.js 12

Install

npm i @trully/true-deepfake-detection-next12

How to use

TrueDeepfakeDetection receives the "configuration" prop. This prop should be an object containing the keys that will let you adapt it to your needs. There are the only five required keys: "isDev", "apiKey", "user_id", "handleData" and "handleError". This is a client-side component, which means it needs to run on the client. By default, every component created in Next.js is executed on the server. You need to make sure our component runs only on the client.

Add styles

To import the styles, go to your _app.js file and add the following import

import "../node_modules/@trully/true-deepfake-detection-next12/dist/styles.css";

Example

"use client";
import "../styles/globals.css";
import "../node_modules/@trully/true-deepfake-detection-next12/dist/styles.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Creating a component

First, create a new component so you can configure TrueDeepfakeDetection component

Example

import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection-next12";

const Trully = () => {
  return (
    <TrueDeepfakeDetection
      configuration={{
        isDev: true,
        apiKey: "YOUR_API_KEY",
        handleData: (data) => {
          //What should be done with the obtained data?
        },
        handleError: (error) => {
          //What should be done if there is an error retrieving the data?
        },
      }}
    />
  );
};
export default Trully;

Required keys definition

Dynamically import the component

Then, to ensure the component runs only on the client, make a dynamic import with ssr: false.

Example

import dynamic from "next/dynamic";

const DynamicComponent = dynamic(() => import("@/components/Trully"), {
  ssr: false,
});

export default function Home() {
  return <DynamicComponent />;
}