How to Create an AI Content Detector with Python

Creating an AI content detector is an exciting project that combines several technologies: Python for backend processing, HTML and CSS for the frontend design, and JavaScript for client-side interactions. This tutorial will guide you through creating a simple AI project that can determine whether a given text is AI-generated or human-written. We will integrate these technologies into a unified web application, providing a practical example of web development with AI.

Here is a sample demo video of our application. Now, let’s build our AI Content Detector.

Introduction to AI Detectors

Artificial Intelligence (AI) has advanced significantly in natural language processing (NLP0. It allows machines to generate text that closely resembles human writing. However, distinguishing between human-written and AI-generated text remains challenging. So we need to build an AI detector that aims to solve this by analyzing text and predicting whether it was generated by an AI or human written.

In this tutorial, we will use Python to handle the backend processing, making use of the OpenAI API’s capabilities. Our frontend will be built with HTML, CSS, and JavaScript, creating an interactive and user-friendly interface.

Setting Up the Backend with Python

Prerequisites

Before we begin, ensure you have Python installed on your machine. You will also need to install Flask, a lightweight web framework for Python.

Creating the Backend Structure

Create a directory named ai-text-detector and navigate into it. Inside this directory, create another directory named backend. This is where we will place our backend code.

mkdir ai-text-detector
cd ai-text-detector
mkdir backend
    

Installing Dependencies

Create a file named requirements.txt inside the backend directory and add the following dependencies:

Flask==2.0.1
requests==2.25.1
spacy==3.1.1
langdetect==1.0.9
pyspellchecker==0.6.2

    

Install these dependencies using pip:

pip install -r requirements.txt

    

let’s setting up the complete project structure

Setting Up the Project Structure

To provide a complete structure for the AI text detection application, we will break it down into the following components:

1. Backend: A Flask server to handle API requests, process text, and integrate with the AI text detection model.
2. Frontend: HTML, CSS, and JavaScript to create a user interface that interacts with the backend.

project-directory/
│
├── backend/
│   ├── app.py
│   ├── requirements.txt
│
├── frontend/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│
├── README.md
│
└── .gitignore

    

This structure outlines the organization of files and directories for building an AI text detection application.

Backend Development with Flask

In the backend directory, create a Flask application in app.py. Define routes to handle API requests, process text data, and integrate with the AI text detection model. You can use libraries like NLTK or SpaCy for text processing and even incorporate pre-trained models for more advanced AI capabilities.

This is designed to detect the language of a given text, correct its spelling, preprocess it, and determine whether the text is AI-generated or human-written using the OpenAI API. Here’s a detailed explanation of the code:

Imports and Initial Setup

from flask import Flask, request, jsonify
import requests
import spacy
from langdetect import detect
from spellchecker import SpellChecker
import os

app = Flask(__name__)

    

• Flask: A web framework for building web applications in Python.
• requests: It is for making HTTP requests.
• spacy: A python library for natural language processing.
• langdetect: A library to detect the language of a text.
• SpellChecker: It is for spell checking.
• os: Provides a way to interact with the operating system.

API Key and Model Initialization

# Load your AI model (e.g., OpenAI GPT)
API_KEY = 'your_openai_api_key'

# Initialize language models and spell checker
nlp = spacy.load("en_core_web_sm")
spell = SpellChecker()

    

• API_KEY: Placeholder for the OpenAI API key.
• nlp: Initializes the spaCy language model for English.
• spell: Initializes the spell checker.

Flask Route for Text Detection

@app.route('/detect', methods=['POST'])
def detect_text():
    data = request.json
    text = data.get('text', '')

    

• Defines a POST endpoint /detect.
• Extracts the JSON data from the request and retrieves the text to process

Language Detection

    # Language Detection
    try:
        language = detect(text)
    except:
        language = 'unknown'
    

• Uses langdetect to detect the language of the text.
• If detection fails, sets the language to ‘unknown’.

Spell Checking

    # Spell Checking
    corrected_text = " ".join([spell.correction(word) for word in text.split()])
    

• Corrects the spelling of each word in the text using the SpellChecker.

Text Preprocessing

    # Text Preprocessing
    doc = nlp(corrected_text)
    tokens = [token.lemma_ for token in doc]
    

• Uses spaCy to preprocess the corrected text.
• Lemmatizes the text (reduces words to their base form).

Integration with AI Model

    # Integrate with AI model (replace mock with actual API call)
    response = requests.post(
        'https://api.openai.com/v1/engines/davinci-codex/completions',
        headers={'Authorization': f'Bearer {API_KEY}'},
        json={
            'prompt': 'Determine if the following text is AI-generated or human-written:\n\n' + corrected_text,
            'max_tokens': 50
        }
    )
    

• Makes a POST request to the OpenAI API with the corrected text.
• Asks the model to determine if the text is AI-generated or human-written.

AI Confidence and Response Parsing

    ai_confidence = response.json().get('choices')[0].get('text', '').strip()

    # Mock percentage calculation (replace with actual logic based on model response)
    ai_percentage = 0.7 if 'AI' in ai_confidence else 0.3
    human_percentage = 1 - ai_percentage
    

• Extracts the model’s response.
• Calculates mock AI and human confidence percentages based on the response.

JSON Response

    return jsonify({
        'original_text': text,
        'corrected_text': corrected_text,
        'tokens': tokens,
        'language': language,
        'ai_percentage': ai_percentage,
        'human_percentage': human_percentage
    })

    

• Returns a JSON response with the original text, corrected text, tokens, detected language, AI confidence percentage, and human confidence percentage.

Must Read

• AI Pulse Weekly: December 2024 – Latest AI Trends and Innovations
• Can Google’s Quantum Chip Willow Crack Bitcoin’s Encryption? Here’s the Truth
• How to Handle Missing Values in Data Science
• Top Data Science Skills You Must Master in 2025
• How to Automating Data Cleaning with PyCaret

Running the Flask App

if __name__ == '__main__':
    app.run(debug=True)

    

• Runs the Flask app in debug mode, which allows for easier development and debugging.

In summary, this Flask application processes a given text by detecting its language, correcting its spelling, and performing preprocessing. It then uses an AI model to estimate the probability of the text being AI-generated or human-written. The results are returned as a JSON response.

backend/requirements.txt

This file lists all the Python dependencies required for the backend Flask server to function properly. It usually includes packages such as Flask, along with any other libraries required for text processing or AI model integration.

Flask==2.0.1
requests==2.25.1
spacy==3.1.1
langdetect==1.0.9
pyspellchecker==0.6.2

    

Creating the Frontend with HTML and CSS

Setting Up the Frontend Structure

Inside the ai-text-detector directory, create another directory named frontend. This is where we will place our frontend code.

mkdir frontend

    

Creating the HTML File

Create a file named index.html inside the frontend directory and add the following code:

frontend/index.html

This file represents the main HTML structure of the user interface. It defines the layout and structure of the web page where users will interact with the application.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Text Detection</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>AI Text Detection</h1>
        <textarea id="inputText" placeholder="Enter text here..."></textarea>
        <button id="detectButton" onclick="detectText()">Detect</button>
        <div id="loading" style="display: none;">Loading...</div>
        <div class="result" id="result" style="display: none;">
            <h2>Detection Result</h2>
            <p><strong>Original Text:</strong> <span id="originalText"></span></p>
            <p><strong>Corrected Text:</strong> <span id="correctedText"></span></p>
            <p><strong>Language:</strong> <span id="language"></span></p>
            <p><strong>AI Confidence:</strong> <span id="aiPercentage"></span>%</p>
            <div class="progress">
                <div class="progress-bar" id="aiProgressBar" style="width: 0%;"></div>
            </div>
            <p><strong>Human Confidence:</strong> <span id="humanPercentage"></span>%</p>
            <div class="progress">
                <div class="progress-bar" id="humanProgressBar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

• Head Section: Contains metadata and links to the CSS stylesheet.
• Body Section: Includes a container with a title, a textarea for user input, a button to trigger text detection, and a loading indicator. It also has a hidden result section that displays the results of the detection once available.

Creating the CSS File

Create a file named style.css inside the frontend directory and add the following code:

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.container {
    max-width: 600px;
    margin: auto;
}
textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:disabled {
    background-color: #ddd;
}
.result {
    margin-top: 20px;
}
.progress {
    height: 20px;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 4px;
    margin-top: 5px;
}
.progress-bar {
    height: 100%;
    background-color: #4CAF50;
    border-radius: 4px;
}

• body: Sets the font family and margin.
• container: Centers the container and sets a maximum width.
• textarea: Styles the textarea for text input.
• button: Styles the detect button, including a disabled state.
• result: Adds margin to the result section.
• progress and progress-bar: Styles the progress bars used to show AI and human confidence percentages.

Adding Interactivity with JavaScript

Creating the JavaScript File

Create a file named script.js inside the frontend directory and add the following code:

async function detectText() {
    const inputText = document.getElementById('inputText').value;
    if (!inputText) {
        alert('Please enter some text');
        return;
    }

    document.getElementById('detectButton').disabled = true;
    document.getElementById('loading').style.display = 'block';

    const response = await fetch('http://localhost:5000/detect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: inputText })
    });

    const result = await response.json();

    document.getElementById('originalText').innerText = result.original_text;
    document.getElementById('correctedText').innerText = result.corrected_text;
    document.getElementById('language').innerText = result.language;
    document.getElementById('aiPercentage').innerText = (result.ai_percentage * 100).toFixed(2);
    document.getElementById('humanPercentage').innerText = (result.human_percentage * 100).toFixed(2);
    document.getElementById('aiProgressBar').style.width = (result.ai_percentage * 100) + '%';
    document.getElementById('humanProgressBar').style.width = (result.human_percentage * 100) + '%';

    document.getElementById('loading').style.display = 'none';
    document.getElementById('detectButton').disabled = false;
    document.getElementById('result').style.display = 'block';
}

detectText Function: Triggered when the detect button is clicked.

• Retrieves the input text from the textarea.
• Displays an alert if no text is entered.
• Disables the detect button and shows the loading indicator.
• Sends a POST request to the Flask backend server with the input text.
• Processes the response and updates the UI with the original text, corrected text, detected language, and AI/human confidence percentages.
• Adjusts the width of the progress bars to reflect the confidence percentages.
• Hides the loading indicator, re-enables the detect button, and shows the result section.

Integrating AI Detection with OpenAI API

To integrate with the OpenAI API, you need to replace the mock detection logic in app.py with actual API calls. Ensure you have an API key from OpenAI and use it in your requests.

Enhancing the Application with Advanced Features

To make our AI text detector more strong, we can add several advanced features:

• Error Handling: It Ensures that errors are gracefully handled and communicated to the user.
• Loading Indicators: Provide visual feedback to the user while the AI model processes the text.
• Visual Feedback: Use progress bars to show the AI and human confidence levels.

Ensuring Security, Performance, and Scalability

When developing any web application, it’s very important to consider security, performance, and scalability:

• Security: Your API keys are must be stored securely and user input is validated to prevent security vulnerabilities.
• Performance: Optimize your code and infrastructure to handle large volumes of text and concurrent requests.
• Scalability: Plan for scaling your backend to handle increased traffic.

Accessibility and Ethical Considerations

Your application must be accessible to everyone. Especially the users with disabilities. Additionally, consider the ethical implications of AI text detection, including user privacy and data protection.

Full Source Code

Here is the complete source code for the AI text detector:

backend/app.py

from flask import Flask, request, jsonify
import requests
import spacy
from langdetect import detect
from spellchecker import SpellChecker
import os

app = Flask(__name__)

# Load your AI model (e.g., OpenAI GPT)
API_KEY = 'your_openai_api_key'

# Initialize language models and spell checker
nlp = spacy.load("en_core_web_sm")
spell = SpellChecker()

@app.route('/detect', methods=['POST'])
def detect_text():
    data = request.json
    text = data.get('text', '')

    # Language Detection
    try:
        language = detect(text)
    except:
        language = 'unknown'

    # Spell Checking
    corrected_text = " ".join([spell.correction(word) for word in text.split()])

    # Text Preprocessing
    doc = nlp(corrected_text)
    tokens = [token.lemma_ for token in doc]

    # Integrate with AI model (replace mock with actual API call)
    response = requests.post(
        'https://api.openai.com/v1/engines/davinci-codex/completions',
        headers={'Authorization': f'Bearer {API_KEY}'},
        json={
            'prompt': 'Determine if the following text is AI-generated or human-written:\n\n' + corrected_text,
            'max_tokens': 50
        }
    )

    ai_confidence = response.json().get('choices')[0].get('text', '').strip()

    # Mock percentage calculation (replace with actual logic based on model response)
    ai_percentage = 0.7 if 'AI' in ai_confidence else 0.3
    human_percentage = 1 - ai_percentage

    return jsonify({
        'original_text': text,
        'corrected_text': corrected_text,
        'tokens': tokens,
        'language': language,
        'ai_percentage': ai_percentage,
        'human_percentage': human_percentage
    })

if __name__ == '__main__':
    app.run(debug=True)

    

backend/requirements.txt

Flask==2.0.1
requests==2.25.1
spacy==3.1.1
langdetect==1.0.9
pyspellchecker==0.6.2
    

frontend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Text Detection</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>AI Text Detection</h1>
        <textarea id="inputText" placeholder="Enter text here..."></textarea>
        <button id="detectButton" onclick="detectText()">Detect</button>
        <div id="loading" style="display: none;">Loading...</div>
        <div class="result" id="result" style="display: none;">
            <h2>Detection Result</h2>
            <p><strong>Original Text:</strong> <span id="originalText"></span></p>
            <p><strong>Corrected Text:</strong> <span id="correctedText"></span></p>
            <p><strong>Language:</strong> <span id="language"></span></p>
            <p><strong>AI Confidence:</strong> <span id="aiPercentage"></span>%</p>
            <div class="progress">
                <div class="progress-bar" id="aiProgressBar" style="width: 0%;"></div>
            </div>
            <p><strong>Human Confidence:</strong> <span id="humanPercentage"></span>%</p>
            <div class="progress">
                <div class="progress-bar" id="humanProgressBar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

frontend/style.css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.container {
    max-width: 600px;
    margin: auto;
}
textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:disabled {
    background-color: #ddd;
}
.result {
    margin-top: 20px;
}
.progress {
    height: 20px;
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 4px;
    margin-top: 5px;
}
.progress-bar {
    height: 100%;
    background-color: #4CAF50;
    border-radius: 4px;
}

frontend/script.js

async function detectText() {
    const inputText = document.getElementById('inputText').value;
    if (!inputText) {
        alert('Please enter some text');
        return;
    }

    document.getElementById('detectButton').disabled = true;
    document.getElementById('loading').style.display = 'block';

    const response = await fetch('http://localhost:5000/detect', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: inputText })
    });

    const result = await response.json();

    document.getElementById('originalText').innerText = result.original_text;
    document.getElementById('correctedText').innerText = result.corrected_text;
    document.getElementById('language').innerText = result.language;
    document.getElementById('aiPercentage').innerText = (result.ai_percentage * 100).toFixed(2);
    document.getElementById('humanPercentage').innerText = (result.human_percentage * 100).toFixed(2);
    document.getElementById('aiProgressBar').style.width = (result.ai_percentage * 100) + '%';
    document.getElementById('humanProgressBar').style.width = (result.human_percentage * 100) + '%';

    document.getElementById('loading').style.display = 'none';
    document.getElementById('detectButton').disabled = false;
    document.getElementById('result').style.display = 'block';
}

Conclusion

In this tutorial, we built a simple AI detector using Python for the backend, HTML and CSS for the frontend, and JavaScript for interactivity. We integrated this with an AI model using the OpenAI API to detect whether a text is AI-generated or human-written. This project serves as a practical example of combining web development with AI and machine learning.

By following this tutorial, you have learned everything. This project is a great starting point for building more complex AI applications and exploring the exciting field of AI and machine learning in web development.

External Resources

OpenAI API Documentation: Link

• Detailed information on using OpenAI models for natural language processing tasks.

Flask Documentation: Link

• Documentation for Flask, a Python web framework covering installation to advanced usage.

HTML MDN Web Docs: Link

• Comprehensive documentation for HTML, including elements, attributes, and best practices.

CSS MDN Web Docs: Link

• Covers styling web pages using CSS, including properties, selectors, and layout techniques.

JavaScript MDN Web Docs: Link

• Detailed explanations and examples of JavaScript features for frontend development.

Spacy Documentation: Link

• Guidance on installation, usage, and advanced features of Spacy, a Python library for natural language processing.

Langdetect Documentation: Link

• Documentation for Langdetect, a Python library for language detection, including installation and usage.

Spellchecker Documentation: Link

• Covers installation, usage, and configuration options for the Spellchecker library in Python.

Web Accessibility MDN Web Docs: Link

• Offers guidance on creating accessible web content for users with disabilities.

Frequently Asked Questions

About The Author

Emmimal Alexander

Welcome! I’m Emmimal Alexander, a trailblazer in the tech world with a unique background that bridges business and technology. As an Anna University Rank Holder, I hold a Master’s in Business Administration and a Bachelor’s in Computer Applications. My career began in the corporate world as an HR executive, then shifted to NSE trading, and finally led me to specialize in artificial intelligence, machine learning, deep learning, and programming languages like Python, HTML, JavaScript, and CSS.

Now, as the founder of EmitechLogic, I’m dedicated to empowering others to master the complexities of AI, ML, DL, and programming. My passion for technology and creative expression drives me to make these advanced fields accessible, practical, and engaging for learners of all levels. Through EmitechLogic, I provide insightful resources, tutorials, and discussions that help professionals and enthusiasts stay ahead in the rapidly evolving tech landscape.

Throughout my journey, I’ve worked on exciting projects like synthetic data generation, neural networks, and creative writing. My mission is to inspire curiosity, share knowledge, and foster a deeper understanding of the endless possibilities technology offers.

When I’m not writing or experimenting with new tech, you’ll find me enjoying creative projects or the beauty of nature. I invite you to explore my blog, connect through my experiences, and join me as we uncover the limitless potential of AI and innovation together!

See author's posts