Build fast, media-tech sites
with CHSCDN Plugins
Powerful, fast and efficient solution for building media-tech websites with ease. Designed to simplify development, it provides a collection of pre-written CSS and JavaScript files tailored for boundless integration. With a focus on speed and usability, CHSCDN eliminates the need for complex configurations, offering a ready-to-use foundation for responsive and interactive designs.
Get started any way you want
Jump right into building with meida-tech use the CDN plug, install it via package
manager to download the source code.
Install via package manager
Install CHSCDN's Python and JavaScript files via npm, pip, curl, or wget. These package-managed downloads provide quick access to prebuilt assets without additional documentation or build scripts. Package managed installs don't include documentation or our full build scripts. You can also use any demo from our Examples to quickly jumpstart media-tech projects.
pip install https://chscdn.vercel.app/install/pip/chscdncurl -o ./chscdn/v1.zip "https://chscdn.vercel.app/download/zip/v1" && unzip -o ./chscdn/v1.zip -d ./chscdn/ && rm ./chscdn/v1.zipRead our installation docs for more info and additional package managers
Include via CDN
When you need to include CHSCDN's compiled CSS or JS, you can use our CDN for boundless integration. Get started quickly with our simple setup or explore examples to enhance your project. You can also load specific scripts as needed for better control.
<link href="https://chscdn.vercel.app/cdn/v1/css/chscdn.min.css" rel="stylesheet" crossorigin="anonymous"/><script src="https://chscdn.vercel.app/cdn/v1/js/chscdn.js" crossorigin="anonymous"></script>Build and extend in real-time with Boilerplates
CHSCDN gives you the power to start your media tech projects easily with our pre-coded templates. Use our HTML boilerplate or React hookup template or Node modules to start right away—no coding necessary, simply ctrl+c and ctrl+v. Our API makes integration easy, enabling you to call functions without a hitch and get image data as a string. With a large number of utility functions, you can line-up your development flow line by line. Further, our pre-made CSS is extremely customizable, letting you reframe and rewrite it to your project requirements.
Using HTML Templates
Leverage our pre-built HTML templates to structure your projects efficiently. These templates provide a solid foundation, eliminating the need for repetitive coding. Simply integrate them into your workflow and customize as needed.
<span class='token attr-name'><span class='token punctuation'><</span>!doctype html<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>html</span> <span class='token attr-name'>lang=</span><span class='token attr-value'>'en'</span><span class='token tag'><span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>head<span class='token punctuation'>></span></span>
<span class='c'><span class='token punctuation'><</span>!-- Required meta tags --<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>meta</span> <span class='token attr-name'>charset=</span><span class='token attr-value'>'UTF-8'</span><span class='token tag'>/<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>meta</span> <span class='token attr-name'>name=</span><span class='token attr-value'>'viewport'</span> <span class='token attr-name'>content=</span><span class='token attr-value'>'width=device-width, initial-scale=1'</span><span class='token tag'>/<span class='token punctuation'>></span></span>
<span class='c'><span class='token punctuation'><</span>!-- CHSCDN CSS --<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>link</span> <span class='token attr-name'>rel=</span><span class='token attr-value'>'stylesheet'</span> <span class='token attr-name'>href=</span><span class='token attr-value'>'https://chscdn.vercel.app/cdn/v1/css/chscdn.min.css'</span> <span class='token attr-name'>crossorigin=</span><span class='token attr-value'>'anonymous'</span><span class='token tag'>/<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>title <span class='token attr-name'>version=</span><span class='token attr-value'>'1.0'</span><span class='token punctuation'>></span></span>document<span class='token tag'><span class='token punctuation'><</span>/title<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>/head<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>style<span class='token punctuation'>></span></span>
<span class='c'>/* Write your css code here */</span>
<span class='token tag'><span class='token punctuation'><</span>/style<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>body<span class='token punctuation'>></span></span>
<span class='c'><span class='token punctuation'><</span>!-- Write your website code here --<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>/body<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>script </span><span class='token attr-name'>src=</span><span class='token attr-value'>'https://chscdn.vercel.app/cdn/v1/js/chscdn.js'</span><span class='token tag'><span class='token punctuation'>></span><span class='token punctuation'><</span>/script<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>script<span class='token punctuation'>></span></span>
<span class='c'>// Write your js code here </span>
<span class='token tag'><span class='token punctuation'><</span>/script<span class='token punctuation'>></span></span>
<span class='token tag'><span class='token punctuation'><</span>/html<span class='token punctuation'>></span></span>
Import via React Hookups
Easily integrate our pre-built React hookup templates to streamline your development process. Simply import the necessary components and modify the provided variables to match your project's needs.
// Import chscdn using npm at first//n
import@ g|React|n from@ s'react'n;
import@ s'chscdn/style.css 'n;
import@ { s|chscdn |n } from@ s'chscdn/script'n; // Importing from the package //n
const@ f|App |n = () => {
// Create an instance of the chscdn class //n
const@ s|cdnInstance|n = new@ g|chscdn|n();
/*....
use that pre-buid code as you want
....*/
return@ (
<>
</>
);
};
export@ default@ f|App|n;
Components, meet the CHS API
New to CHSCDN, our CHSAPI integration is made for hassle-free implementation in frontend as well as backend applications. We've developed it with a strong feature set that simplifies calling and working with the CHS API like never before. It includes built-in response handlers, error handling, and adaptable utility functions to ease your workflow. Whether you're working with requests, processing responses, or integrating custom API interactions, CHSCDN gives you a smooth and efficient experience.
Shout for DeepFake Detection
CHS API provides a robust deepfake detection tool, integration through CHSCDN being as easy as it can be. Pre-built functions and modules ensure calling the API and processing responses are as smooth as possible. Apart from deepfake detection, such utilities extend to other CHS API functionality, providing a robust and effective experience.
// Connect the CHSCDN plugin//n
// Create an instance of the CHSCDN class//n
let@ s|chscdn |n = new@ g|CHSCDN|n();
// Define the local image path//n
let@ s|image|n = s'C:/Users/Pictures/example.png'n;
// Convert the local image to a base64 string//n
let@ s|base64_image|n = await@ s|chscdn|n.f|image2base64|n(s|image|n); // Alternative: image_to_base64//n
// Set up API parameters//n
let@ s|api_value|n = { s|task:|n s'deepfake detect'n, s|media|n: s|base64_image|n };
// Receive the API response//n
let@ s|response|n = await@ s|chscdn|n.f|APICaller|n(s|api_value|n);
// Check for errors from the user side//n
if@(s|chscdn|n.f|error_detect|n(s|response|n, s'mute'n)){
console@|.error(s'Error occurred while calling CHS API!'n);
}else@{
// Display the result in the developer console//n
console@|.log(s|response|n?.s|result|n?.s|class |n);
}
Responce JSON
CHSCDN manages CHS API responses effectively, returning only the real results and errors transparently. With native response handling, it guarantees your system receives clean, structured data or well-formed error messages for seamless integration.
{
<span class='token attr-name'>"metadata"</span>: {
<span class='token attr-name'>"version"</span>: <span class='token attr-value'>"1.0.0"</span>,
<span class='token attr-name'>"request_id"</span>: <span class='token attr-value'>"Public Key"</span>,
<span class='token attr-name'>"header"</span>: {
<span class='token attr-name'>"Content-Type"</span>: <span class='token attr-value'>"application/json"</span>
},
<span class='token attr-name'>"processing_time"</span>: <span class='token attr-value'>"1s"</span>,
<span class='token attr-name'>"timestamp"</span>: <span class='token attr-value'>"2025-04-02 19:48:12"</span>
},
<span class='token attr-name'>"network"</span>: {
<span class='token attr-name'>"url"</span>: <span class='token attr-value'>"https://chsapi.vercel.app/api/"</span>,
<span class='token attr-name'>"kernel"</span>: <span class='token attr-value'>"inphant api"</span>,
<span class='token attr-name'>"provider"</span>: <span class='token attr-value'>"chsapi"</span>
},
<span class='token attr-name'>"result"</span>: {
<span class='token attr-name'>"class"</span>: <span class='token attr-value'>"Real"</span>,
<span class='token attr-name'>"accuracy"</span>: <span class='token attr-value'>96.8</span>
},
<span class='token attr-name'>"source"</span>: <span class='token attr-value'>"WHITE LOTUS Community"</span>,
<span class='token attr-name'>"status"</span>: {
<span class='token attr-name'>"code"</span>: <span class='token attr-value'>200</span>,
<span class='token attr-name'>"message"</span>: <span class='token attr-value'>"Media processed successfully"</span>
}
}