Create AI Content Detector an Artificial Intelligence Web Software Project: A Step-by-Step Guide for Free in 2023

Create AI Content Detector For Free 2023

Create AI content detector a web based software which contains client side code and server side code using HTML, CSS, JavaScript and Nodejs which is combined with artificial intelligence to detect AI generated content present in the article. This software can be used for AI projects.

What is an AI Content Detector? And how it works?

An artificial intelligence content detector is a smart tool that can identify whether an article is created by humans or by an AI tool like Chat GPT. An AI detector is trained on so many examples of Human-made content and Computer generated content so that it can give us accurate results. So when we enter an article it will start comparing from what it has learned and will make a guess whether it is AI generated or Human generated, so in this way AI detector functions.

How are we going to create AI content detector?

AI Content Detector Software

It is very simple no need to worry, first we are going to make a client side program using HTML, CSS and JavaScript, so that we can paste our article in a text area with a button and result area.

And we will create a server side program where we will use NodeJS for server side scripting and note that I’m not using any API KEY of AI in this because this is a free tutorial to create AI content detector. So it is just a sample code where the output will always be true.

If you have money you can buy any subscription and you can add that API Key in this code which I have given below but note that I won’t be responsible for any loss.

Let us Begin

Most Important Steps –

To run combined client-side and server-side code, you’ll need to follow these steps –

  • Create a new folder for your project in your local disk with any name you want like “AI Content Detector”.
Create New File VS Code
  • Then create one file and name it “index.html”
  • And create another file named “server.js”
Index.html VS Code
  • That’s it
  • Now paste the code from below into these newly created files respectively.
  • With these steps we completed creating client-side and server-side code.
  • Now to run this program, Open new terminal
New Terminal VS Code
  • In that first paste this command “npm install express body-parser” and press enter.
  •  Then paste this command “node server.js” and press enter.
Commands In Terminal VS Code
  • Now your server is ready
  •  To see the output open your web browser and paste this URL in the search bar “http://localhost:3000
AI Content Detector
Article Content
  • This software is responsive in Mobile and Tablet devices.

Hooray! Our web software is perfectly created.

Let’s See the Client-side and Server-side Code

Client-side Code

index.html

<!DOCTYPE html>
<html>
<head>
    <title>AI Content Detection</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #333;
            color: #fff;
            margin: 0;
            padding: 0;
        }

        .navbar {
            background-color: #222;
            padding: 20px;
            display: flex;
            align-items: center;
        }

        .navbar-title {
            margin: 0;
            padding: 0;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
        }

        .container {
            background-color: #222;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            margin-top: 150px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        h1 {
            text-align: left;
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #444;
            color: #fff;
            resize: vertical;
            margin-bottom: 20px;
            box-sizing: border-box; /* Include padding in the width */
            display: block; /* Remove default inline-block spacing */
            margin-left: auto; /* Center horizontally */
            margin-right: auto; /* Center horizontally */
        }

        button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-weight: bold;
        }

        button:hover {
            background-color: #0056b3;
        }

        #resultText {
            font-weight: bold;
            margin-top: 10px;
        }

        @media only screen and (max-width: 600px) {
            .container {
                margin-top: 50px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="navbar">
        <h1 class="navbar-title">AI Content Detection</h1>
    </div>
    <div class="container">
        <div>
            <h2>Article Content</h2>
            <textarea id="article" rows="10" placeholder="Enter article content..."></textarea>
            <button onclick="detectAIContent()">Detect AI Content</button>
        </div>
        <div id="result">
            <h2>Detection Result</h2>
            <p id="resultText"></p>
        </div>
    </div>

    <script>
        function detectAIContent() {
            var articleText = document.getElementById("article").value;

            // Make a request to the server to detect AI content
            fetch('/detect_ai_content', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ article: articleText })
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                displayDetectionResult(data.result);
            })
            .catch(function(error) {
                console.log('Error:', error);
            });
        }

        function displayDetectionResult(result) {
            var resultText = document.getElementById("resultText");

            if (result) {
                resultText.textContent = "AI Content Detected!";
                resultText.style.color = "#ff5252";
            } else {
                resultText.textContent = "No AI Content Detected.";
                resultText.style.color = "#66bb6a";
            }
        }
    </script>
</body>
</html>

Server-side Code

server.js

const express = require('express');
const bodyParser = require('body-parser');
const fetch = require('node-fetch');

const app = express();
const port = 3000;
const OPENAI_API_KEY = 'YOUR_OPENAI_API_KEY';

// Middleware to parse JSON bodies
app.use(bodyParser.json());

// Endpoint to serve the HTML page
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// Endpoint to handle AI content detection
app.post('/detect_ai_content', async (req, res) => {
    const articleText = req.body.article;

    try {
        // Perform AI content detection using the OpenAI API
        const isAIContent = await detectAIContent(articleText);

        res.json({ result: isAIContent });
    } catch (error) {
        console.error('Error:', error);
        res.status(500).json({ error: 'An error occurred during AI content detection.' });
    }
});

// Function to perform AI content detection using the OpenAI API
async function detectAIContent(articleText) {
    const apiUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';
    const prompt = `This text is ${articleText}`;

    const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            prompt,
            max_tokens: 1,
            temperature: 0,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0
        })
    });

    const data = await response.json();
    const completion = data.choices[0].text.trim();

    return completion.includes('AI-generated');
}

// Start the server
app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

This is how we create AI content Detector very simply.

To create AI Content detector you don’t have to be a professional code or software developer, just follow the simple steps given above to create a project like this.

In this project I didn’t used any money, everything was for free, the software used, code, etc. This is an easy project and this project is for beginners who wants to gain more knowledge in the field of artificial intelligence.

Note – This is just a sample software and actual AI detector requires a pre-trained AI model which you can get from https://openai.com/ and it’s not free. You can paste the openai API KEY as shown in the image below. I’m not responsible for any loss, buy API Key at your own risk. This tutorial was for a simple project using artificial intelligence technology which you can present at your schools or colleges and only for educational purpose.

openai API KEY VS Code

Links to visit –

To know more about Pre-trained models visit here – https://innovatequests.com/pre-trained-models-and-deep-learning-with-cnn/

To know how to make money from home using AI visit here – https://innovatequests.com/seo-friendly-ai-scripting-software-for-youtube/

FAQs

What is AI Content Detector?

AI Content detector is a software that finds if it is a human generated content or AI generated content by training using lots of examples of human generated content and AI generated content respectively.

How to create AI Content Detector?

It is very easy, to create AI content detector you just have to know the basic software technology and follows these simple steps mentioned in this article – https://innovatequests.com/?p=1344

What is Artificial Intelligence?

Artificial Intelligence is a man-made computer brain, which functions like a real human brain and is way faster than human brain.

What is Client-side?

Client-side, we can say this as frontend part of the code, where we can enter our details in the textbox and where all other elements like buttons, Nav bar, etc are present.

What is Server-side?

Server-side is where all the backend work of a code is processed, we take inputs from user using client-side and we process those inputs in the server-side, like addition of a no, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *