{"slug": "two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai", "title": "Two Devs and a Copilot Created ClassifierAI: A Prototype Chrome Extension that Automatically Detects AI-Generated Content on DEV!", "summary": "Two developers, Francis Tran and Elmar Chavez, built ClassifierAI, a prototype Chrome extension that automatically detects AI-generated content on the DEV platform. The extension analyzes an entire article and its cover image, classifying it as either \"AI\" or \"NotAI\" using a model trained on 866 images across two classes. The project aims to help users identify AI-generated articles to improve the quality and diversity of content on dev.to.", "body_md": "*This is a submission for the GitHub Finish-Up-A-Thon Challenge*\n\nNote:AI is currently a Hot Topic in the developer space.I recommend reading this post in full before commenting.The dataset being used does not come from dev.to, so expect the AI model to be inaccurate. This is to showcase a tool that can be helpful for others in the future and eventually tune it to be more accurate on the DEV platform.I will talk more about it further in the post. If you have any questions or concerns, I would love to hear from you!\n\n## Authors\n\nMain Author:Francis Tran[@francistrdev]\n\nCo-Author:Elmar Chavez[@codingwithjiro]\n\nThis is a Team Submission featuring Francis and Elmar!\n\n## Table of Contents\n\n- Introduction\n- What We Built\n\n- Why does this Project Exist?\n- Demo\n\n- Installation\n- Using the Chrome Extension\n- The Comeback Story\n\n- The Old Era\n- The New Era\n- My Experience with GitHub Copilot\n- Summary\n\n- Current Challenges in our Chrome Extension\n- Thank You!\n\nAI has shaped everything on the internet. This ranges from easier access to information faster than before to having AI in our development workflows.\n\nWith the good side of the use of AI, there is also the bad side of using AI. Currently, there is a lot of purely AI-generated content being produced on the internet in order for sites to boost themselves to relevance on Google, which creates unnecessary competition. Additionally, with the advance of AI, it has continuously become more difficult to distinguish content that is AI-generated versus content made by a Human. \"AI\" as a name on its own has a bad reputation due to how people are using AI regardless of if you are using it as a tool.\n\nEven though AI is everywhere, many people are combating it. Sometimes it is handled in a professional setting while others handle on a vigilante level (not recommended at all). **As a DEV user, the goal is to try to minimize AI-generated articles on dev.to in order to enhance the user experience and diversifying content where others can learn and grow as a developer.**\n\n**With that said, along with Elmar's collaboration, we built ClassifierAI!**\n\nDisclaimer:Before commenting, this project is a prototype! This is meant to showcase what the Chrome Extension can do based on existing data used, which the model is not accurate due to data not coming from dev.to directly.This Chrome Extension is not meant to be used as a perfect solution to filter out AI-Generated contentas a result of data outside of dev.to.I will talk more about this later in the post.\n\nWe built **ClassifierAI**, which is a * prototype* Chrome Extension that allows you to detect AI-generated content on DEV in an instant. This is built using\n\n```\n866 Images Total\n2 Classes Total\n  - \"AI\" Class\n  - \"NotAI\" Class\n\nEpochs: 30\nBatch Size: 16\nLearning Rate: 0.0001\n```\n\nInitially, **it started off as a Chrome Extension that scans 100 images on Google Images to detect if the image is AI-generated and label them accordingly.**\n\nFor this case, we updated the Chrome Extension where it only works on dev.to, and is able to classify the entire article, including the cover image, and showing the result to the user whether the content is AI-generated. This Chrome Extension works every time the user clicks on an article on DEV.\n\nGenerative AI is currently a hot topic in my experience. Many friends and colleagues I have despise Generative AI because they have the notion that **\"it will replace your job\".**\n\nAlthough there are tools to combat this like **GPTZero**, it is still an issue because:\n\nWith these problems in mind and the state of DEV, I want to create a useful tool that **identifies AI-generated content automatically without having to open GPTZero and copy and pasting just to know the result of the content.**\n\nAdditionally, **this Chrome Extension is personalized for DEV since I believe the dataset collected in the future will be more focused and accurate** (I believe all blogging platforms have different writing styles regardless of content being AI-Generated. Hence, making it more personalized and focus on the DEV space).\n\nOverall, *this Chrome Extension solves the issue when it comes to less manual work and more personalized for DEV since I believe it reduces the chance of having tools that bypass the AI scanner since it is more focused than broad.*\n\n**With community support, I hope that the model will be more tuned and accurate as DEV continues forward! Which is why we made it Open Sourced as an Unofficial DEV Chrome Extension. More details later in the post.**\n\nWith that said, we will now show our prototype Chrome Extension in action!\n\nIn this demo, we will show you the installation process in order to get the Chrome Extension running in your browser and showcasing how the Chrome Extension works.\n\nTo get started, create an empty folder on your computer and open it using **VScode or any IDE.**\n\n**1) In the Terminal, clone the repository:**\n\n`git clone https://github.com/FrancisTR/ClassifierAI.git`\n\n**2) Ensure you are in the directory by doing:**\n\n`cd ClassifierAI`\n\n**3) Then install packages and run the build:**\n\n`npm install`\n\n`npm run build`\n\n**4) On your browser, head over to the extension page and ensure you enabled Developer Mode.**\n\n**5) Finally, drag the \" dist\" folder onto the extension page and you are ready to go!**\n\nNow we will talk about how to use the Chrome Extension on dev.to!\n\nTo use the Chrome Extension, open the popup located on the top right of the browser and enable the switch.\n\nThen, click on any article you see on dev.to and it will do its thing: Scanning the Cover image and the article to determine if either of them are AI-generated.\n\n**For the Cover Image,** the AI will perform Image Classification to determine if the image is AI-generated. Once the scan is complete, the AI will embed an icon, located on the bottom right of the image. In this case, it is not AI-generated.\n\n**There are three icons to expect:**\n\n**For the article itself,** the way you can see if the article is written by AI or not is located in the popup menu in the Chrome Extension on the top right as shown below:\n\nNote:There is currently no breakdown feature on which part of the article is AI-generated or not.\n\nInitially, the project was considered **\"complete\"** in my view a couple years ago. However, I wasn't proud of the outcome due to the fact that there were bugs that were hard to detect and how **\"messy\" it felt.** I haven't touched the project in years due to other things that needed my attention during that span.\n\nWhen I heard about this challenge, I though it would be a **great opportunity to not only finish the project, but also to work with Elmar directly and explain the code-base to someone.**\n\nThis gave me the opportunity to practice my skills in communication and to be able to explain what I have built. It was also a good opportunity for Elmar as well since this is his first time working on an existing code-base and contributing to it!\n\nNot only did we finish the prototype, but we also learned from each other when it comes to:\n\nWith that said, **I will be explaining what the project was meant to be and how we got to the finish line!**\n\nThe old ClassifierAI's purpose was to scan 100 Images sequentially based on what is currently being loaded on the page and to label each image accordingly if it is made by a Human or not via icons shown here.\n\nFor the main functionality, all you have to do is enable the scan in the popup.\n\nYou then scroll the Google Image page and let it do its thing.\n\nThat's it.\n\nAdditionally, the repository is incomplete since the \"demo\" section in the README.md is empty during that time. The overall project back then didn't feel \"impactful\" since its only purpose was to scan images and the model I currently have **isn't accurate due to an unbalanced data sample in the dataset overall.**\n\n**If you would like to see what it looked like initially, feel free to visit the branch I linked below: https://github.com/FrancisTRAlt/ClassifierAI/tree/OldProject**\n\nNow, we then transfer to the new Era and how we complete the project **(as a prototype)!**\n\nWhen the Challenge was announced, I asked Elmar if he would like to contribute to my half-baked project, which he said \"Yes\"!\n\n**The first thing we did was to migrate to Vite.** The reason is that in the old project, the packages were installed locally instead of via `npm`\n\n. The reason is how Chrome Extension works is that it restricts developers from calling \"CDN\" links and external packages. The only way to do this in Vanilla was to install the files locally.\n\nIs this ideal? Definitely not. Back then, with the knowledge I had, it was the only solution.\n\nFortunately, with the help of AI, we were able to Migrate to Vite. Migrating to Vite allows us to install packages via `npm`\n\n. It is much more clean and saves a lot of space.\n\nSpeaking of installing packages, Elmar noted that the **ml5.js**, a library that is used for Teachable Machines, is a deprecated package and other issues he came across:\n\nThe bright side is that the issues were fixed, though it gave us this when we `npm install`\n\n:\n\nYou could say that we can do `npm audit fix --force`\n\n, but that lead to more issues than before. Even then when doing `npm audit fix`\n\ndoesn't change anything. **For right now, these vulnerabilities exist in the current state...**\n\nWith the migration to Vite, **we then moved on to the bigger tasks, which is training the AI Model!**\n\nInitially, the goal was using Gemma 4 instead of using the custom model I have trained using Teachable Machines for scanning cover images. However, like any local model, the problem was performance since it takes awhile to produce an output.\n\nFor some reason, it got to the point where the Chrome Extension nuked the whole browser, making it unusable *(Don't ask how that happened or even how it is possible to begin with).*\n\nInstead of using an existing LLM, **I thought about using an existing dataset that already has images for me to train as an improvement to the current model I have for Image Classification.**\n\nAlthough this is an improvement, the model is still not perfect **since the images in the dataset is WAY different from images being used on DEV**, but it is at least diversified compared to the previous dataset I had. Additionally, instead of scanning 100 images, it only scans one (which is the Cover Image).\n\nThe new feature we implemented in our Chrome Extension is classifying articles and determining if the article is AI-generated. I looked on YouTube for an approach and I found this video explaining on classifying text:\n\nThe way text-classification works on this current Chrome Extension is that it grabs the entire text from the article to feed into the model.\n\n``` js\nfunction getCleanArticleText() {\n  const root =\n    document.querySelector(\".crayons-article__body\") ||\n    document.querySelector(\"article\");\n\n  return root ? normalizeWhitespace(root.innerText) : \"\";\n}\n```\n\nThen, it takes in the article and performs classification based on the dataset used from Wikipedia **(which is the reason why it is not accurate when using this extension on dev.to due to the style of the content).**\n\nIt then gives a score to the user a percentage on how much it is Human generated versus AI-generated.\n\n```\nfunction detectGPTStyle(text) {\n  if (!wikipediaDataset || wikipediaDataset.length < 10) {\n    return baseUnknownResult();\n  }\n\n  const datasetScore = compareDataset(text);       // AI %\n  const devHuman = computeDevHumanScore(text);     // Human %\n  const generalHuman = computeGeneralScore(text);  // Human %\n  const aiPenalty = detectAIPatterns(text);        // AI %\n\n  // Adjust weights here\n  let humanScore =\n    devHuman * 0.40 +\n    (100 - datasetScore) * 0.35 +\n    generalHuman * 0.25 -\n    aiPenalty * 0.25;\n\n  // Modify squash sensitivity\n  humanScore = squashScore(humanScore);\n\n  // Adjust classification thresholds\n  let label =\n    humanScore <= 33.33\n      ? \"AI-generated\"\n      : humanScore >= 66.66\n        ? \"Human-written\"\n        : \"Mixed\";\n\n  const finalScore = Number(humanScore.toFixed(2));\n  return {\n    label,\n    averageAIScore: finalScore,\n    humanPercent: finalScore,\n    aiPercent: Number((100 - humanScore).toFixed(2)),\n    mixedPercent:\n      finalScore > 33.33 && finalScore < 66.66 ? 100 : 0,\n  };\n}\n```\n\nOther small things we added was UI enhancements where we used **chart.js** to display information in a more clean way.\n\nThat's it! The project is complete! Is it perfect?\n\nI say this because there is always room for improvements, especially with the dataset we currently have. The dataset for the image classification and text classification is there as a placeholder just to showcase the main functionality. **In the future, we hope to use the dataset coming from dev.to specifically in order for the model to be more accurate.**\n\nDisclaimer:This section accounts for my experience using GitHub Copilot. Elmar uses ChatGPT for his development workflow and has been using it as a mentor to navigate the code-base and fix bugs as shown earlier.\n\nI have used GitHub Copilot before in past challenges on DEV and I talked about my experience using GitHub Copilot. For this project, nothing really changed much. The main thing GitHub Copilot has been really useful for is in the **migration process** such as\n\nOne example I will showcase is telling GitHub Copilot to translate the current **ml5.js code to Tensorflow.js.**\n\nEssentially, I asked GitHub Copilot **\"Migrate from ml5.js to tensorflow.js\"** and it did the work!\n\nIt was quite a smooth process when migrating. Sometimes there were errors during the migration such as:\n\n`Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'NotAI')`\n\nEven with that, it was able to fix the issue relatively fast without the need for me to undo everything and re-prompt it **(which is the biggest issue when working with AI).**\n\nOverall, it was nice to see GitHub Copilot being able to migrate, fix errors, and ensure the code-base cleanly migrates without any issues.\n\nHowever, **token usage has been burning faster than before when I used it in a previous DEV challenge where we used GitHub Copilot.** I am not sure if there is a change in policy of how many tokens are being burnt, but it is one thing I noticed. Other than that, it was a good experience!\n\nIn conclusion, this is the project we built with the intention of reducing the number of AI-generated content on DEV. Additionally, we intended for this project to diversify content and enhance the user's experience when it comes to connecting and growing as a developer.\n\nNot only did we create this project with the intention of helping the community, but we also learned new things when working on the project.\n\nFor me, **I learned about the responsibility as a project maintainer and being able to communicate with my partner on the tasks that needed to be completed as well as considering the time zone we live in** (I am based in the US while Elmar is based in the Philippines). Additionally, as this is Elmar's first time seeing my existing code, **I learned not to over explain my code and to be as simple and straightforward as possible when it comes to delivering tasks to Elmar and reviewing his Pull Requests.**\n\nFor Elmar, this is his statement about this project overall:\n\n## Navigating My First Open Source Chrome Extension Codebase\n\nWorking on someone else's codebase was a completely different challenge.\n\nAt times, it felt like I was walking on glass, afraid to mess something up.\n\nIt forced me to slow down and read the codebase first. While ChatGPT helped me understand concepts and unfamiliar parts of the code.\n\nI've had experience reviewing other people's code through Frontend Mentor, but this felt very different. When contributing to a real project, every change has consequences. I found myself asking more questions than usual and learning the answers along the way.\n\nOne thing I learned even more than the codebase itself was the importance of communication. I spent a lot of time discussing ideas, asking questions, and seeking clarification from the maintainer.\n\nLooking back, I think the cycle of asking, learning, understanding, and validating took far more time than writing the code itself.\n\nI also learned the importance of being adaptable. The project evolved during my contribution journey, which meant my assumptions and plans had to evolve as well. On top of that, I encountered my first real merge conflicts but I managed to pull through in the end.\n\nOverall, contributing to ClassifierAI gave me a much better understanding of how real-world software development differs from building projects alone.\n\nBeyond the technical skills, I learned how to collaborate with maintainers and communicate changes through pull requests.\n\nThis experience yet again proved what I read early on in my career:\n\n\"The ability to read and understand code is often more valuable than the ability to write it.\"\n\nAlthough we have learn a lot, there are still current issues that I believe it is important to address when using this Chrome Extension.\n\nAs mentioned many times before, this project is a prototype for many reasons. Right now:\n\n**The model and the dataset is not aligned to what we have on dev.to.** In detail, the dataset comes from the Wikipedia while the dataset for images comes from HuggingFace. Both of these dataset are not accurate to the dev.to platform. We hope, with more collaboration, to get data from dev.to and retrain the model that is more accurate than before and align to value of the DEV community.\n\n**Limited features to the users such as which area in the article is AI-generated and which is not.** Also, not accounting for when it is appropriate to use AI such as using AI as a translation, grammatical checks, etc.\n\nWith that said, we hope you see the value in our work and contributing to this project further!\n\n**Thank you for reading our post** on our Chrome Extension Project! It was fun to work with Elmar and getting to know him more and his current knowledge as a developer!\n\n**If you would love to contribute to our Chrome Extension, feel free to visit the repository below. Your contribution matters to dev.to! Feel free to provide any feature requests and issues you may notice!**\n\nA Google Chrome Extension that integrates Machine Learning to determine if the image and the dev.to article, that the user is viewing, is AI-Generated. This uses Tensorflow.js to perform Image Classification and Text Classification.\n\nThe model is trained using [Teachable Machine](https://teachablemachine.withgoogle.com/) by Google where it is train from 866 images, that consists of AI and Non-AI images, using the following settings:\n\nClone or download the repository and navigate to the project directory.\n\nInstall the project dependencies:\n\n```\nnpm install\n```\n\nBuild the extension:\n\n```\nnpm run build\n```\n\nOpen Google Chrome and navigate to:\n\n```\nchrome://extensions\n```\n\nEnable **Developer Mode** in the top-right corner.\n\nClick **Load unpacked** and select the generated `dist/`\n\nfolder.\n\nThe extension is now installed and ready to use.\n\nClassifierAI is an open-source project…\n\nI hope this project will be useful for you and inspire you to build something that will make an impact! Thanks for stopping by!\n\n**Follow The DEVengers Organization!**\n\n**Check out Elmar Chavez!**", "url": "https://wpnews.pro/news/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai", "canonical_source": "https://dev.to/devengers/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-automatically-4fge", "published_at": "2026-06-06 01:41:40+00:00", "updated_at": "2026-06-06 02:12:13.303069+00:00", "lang": "en", "topics": ["artificial-intelligence", "generative-ai", "ai-tools", "ai-products", "machine-learning"], "entities": ["Francis Tran", "Elmar Chavez", "GitHub Copilot", "ClassifierAI", "DEV"], "alternates": {"html": "https://wpnews.pro/news/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai", "markdown": "https://wpnews.pro/news/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai.md", "text": "https://wpnews.pro/news/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai.txt", "jsonld": "https://wpnews.pro/news/two-devs-and-a-copilot-created-classifierai-a-prototype-chrome-extension-that-ai.jsonld"}}