Open-Source Plugin Release: One-click WordPress AI Face Test

Ever wondered if you could add a fun AI face analysis to your WordPress site with just a single click? Now you can! We’re excited to announce the release of our open-source AI face test WordPress plugin – a “How Normal Am I?” AI beauty analyzer packaged neatly for WordPress. This hownormalami WordPress plugin lets you embed an interactive face test on any page using a simple shortcode. The result? Your visitors can instantly check “how attractive am I” according to AI – live on your site, privately and for free. All the heavy lifting happens in the browser (thanks to face-api.js), so no images or data ever leave your site. In this article, we’ll dive into why this plugin rocks, how to get started in minutes, the tech under the hood (for the geeks 🤓), SEO/performance tips, FAQs, and more. By the end, you’ll be ready to add this engaging AI face analyzer to your own WordPress site. Let’s get started!

Why This Plugin Rocks

What makes the How Normal Am I? plugin special? In a nutshell, it brings a powerful, privacy-friendly AI face analyzer to WordPress with minimal effort. Here are the top reasons we think this AI beauty analyzer WP plugin will knock your socks off:

One-Click Setup: It’s ridiculously easy to use – just install the plugin and drop the shortcode into any page or post. No coding required. One click, and you’ve got a live “how attractive am I” AI shortcode running on your site. 🎯
Engaging & Fun for Visitors: This isn’t just another form or slider – it’s an interactive AI face test that rates your visitor’s face (beauty score, age guess, emotion, etc.) in real-time via their webcam. Visitors will stick around to try it (and likely share their results!).
Powered by Face Recognition Tech: Under the hood, our plugin is essentially a face-api.js WordPress integration. Face-api.js is a cutting-edge face detection and analysis library running on TensorFlow.js. You get advanced AI capabilities (face detection, age and gender prediction, emotion recognition, etc.) without needing any external AI service or API keys. It’s all bundled in and ready to go.
Privacy-First (No Data Leaves Your Site): Concerned about privacy? So are we. This plugin runs entirely on-device – all the AI processing happens in the user’s browser. Images never upload to a server. No cloud, no external requests for analysis. It’s a “How Normal Am I?” face test that keeps personal data 100% on your site (and the user’s device). 🌐🔒 (See our [Privacy Policy] for more on how we handle data.)
Open-Source & Extensible: As developers, we made this for the community. The code is open-source (GPL-2.0) and available on GitHub. 👐 That means you can inspect how it works, tweak it, or contribute improvements. (P.S. We welcome pull requests and GitHub stars – if you like it, let us know by giving it a ⭐!) Developers can use this as a base for further face recognition projects or integrate other face-api.js models. It’s not a black box; it’s your box.
Customizable Features: Out of the box, the plugin measures beauty, age, gender, BMI, emotion, and even “life expectancy” (don’t worry, it’s just a playful guess!). But maybe you only care about the beauty score and age? No problem – the plugin’s Settings page lets you toggle which metrics to display. You’re in control of the AI insights you want to show.
Lightweight & Fast: Despite doing AI analysis, the plugin is optimized for performance. It uses the lightweight Tiny Face Detector model for quick face detection and loads models on-demand. The script is only active on pages where you embed the shortcode, so it won’t bloat the rest of your site. Plus, everything runs asynchronously, so it shouldn’t bog down page loading. (We’ll cover some performance tips later.)

In short, the How Normal Am I? WordPress plugin brings an AI beauty analyzer to your site that’s fun, informative, privacy-friendly, and easy to set up. It’s a great way to engage your audience with the trendy “AI face test” craze – all while keeping control of your content and data. Now, let’s see how to get it running on your site in a flash.

Quick-Start Guide

Ready to add the AI face test to your WordPress site? Follow these simple steps to get up and running in minutes. 🏃‍♂️💨

Download the Plugin

Grab the latest “How Normal Am I?” plugin from GitHub. You can download the ZIP from the GitHub repo or clone it if you’re using Git. Save the ZIP file to your computer.

Download on GitHub

Install & Activate

In your WordPress dashboard, go to Plugins > Add New > Upload Plugin. Select the how-normal-am-i.zip file you downloaded, install it, and click Activate. Once activated, you’ll see a new menu item (or settings link) for “How Normal Am I?” under Settings. (No configuration is necessary to get started, but you can tweak options there if you want.)

Embed the Shortcode

Decide where you want the AI face test to appear (for example, create a new page called “AI Face Test” or edit an existing page/post). In the content editor, add the shortcode exactly where you want the camera interface and results to show up. You can place it in a Paragraph block or Shortcode block in Gutenberg, or in the classic editor just paste it in the text.

[how_normal_am_i]

This shortcode is the magic trigger – when the page is viewed, it will be replaced by the interactive AI face test UI.

Publish and Test

Publish or update the page with the shortcode and then view it on the front-end. You should see the How Normal Am I? interface load. It will typically show a camera preview and a prompt to allow camera access (or an option to upload a photo, depending on the plugin’s capabilities). Go ahead and allow camera access so the AI can see your face. In a few seconds, you’ll notice the plugin “heating up the algorithms” – it’s loading the face detection models in the background. Once ready, you’ll be able to start the test and get your results in real-time.

View Your AI Analysis

With your camera on, the AI will analyze your face and display various metrics: Beauty Score (0-10), Age Prediction, Dominant Emotion, Gender Guess, BMI estimate, and even a fun “Years Left to Live” number (an imaginative guess at life expectancy). It will also compute an overall “Normality” percentage score, comparing you to the average of past participants. All of this updates instantly as the camera sees you – try changing your expression or lighting and see the scores change! Remember, it’s all in good fun – the results aren’t scientific, but they make for a great conversation starter.

That’s it – with these steps, you’ve added a fully functional AI face analyzer to your site! 🎉 Visitors can now experience the “How Normal Am I?” test directly on your page. No separate app or external website needed – it’s part of your site, which is great for keeping users engaged.

Pro Tip: While not required, you can visit Settings > How Normal Am I in your WordPress admin to find a few configuration options. For instance, you might be able to enable/disable certain metrics (if you’d prefer not to show life expectancy, for example), or adjust some labels. The default settings will work for most, but it’s nice to know you have control.

Now that you’re up and running, let’s pull back the curtain and see how this thing works behind the scenes!

Under the Hood: How It Works

Curious about the tech behind this face-api.js WordPress plugin? Here’s an overview of what’s happening when the How Normal Am I plugin runs, and how we leverage on-device AI to make it all possible.

Built on Face-API.js and TensorFlow.js

The core of this plugin’s magic is face-api.js, an open-source JavaScript library for face detection and analysis. Face-api.js provides pre-trained neural network models (built on TensorFlow.js) that can detect faces and predict attributes like age, gender, facial expression, and more – all in the browser. We chose face-api.js because it’s lightweight and proven for real-time face tasks, which is perfect for a web-based AI beauty analyzer.

When your visitors load a page with the shortcode, the plugin quietly loads several AI models behind the scenes:

Face Detector: We use the Tiny Face Detector model (a fast, compact CNN) to find the presence and location of a face in the camera frame. This model is optimized for speed, making the experience smooth even on mid-range devices. It’s less accurate than some heavy models but plenty good for our purposes and runs quickly in-browser.
Facial Landmark & Metrics: Once a face is detected, we identify key facial landmarks (eyes, nose, mouth, etc.) and measure facial ratios. The plugin algorithm uses these points to compute a “beauty score” based on facial symmetry and proportions (think golden ratio). Essentially, it compares your face’s symmetry to an idealized average – a common (though imperfect) way some beauty rating algorithms work. This gives the 0-10 score you see as “Beauty”.
Age & Gender Prediction: The plugin loads a pre-trained age/gender model (from face-api.js’s library) to estimate your age and gender from facial features. Ever seen those “How old do I look?” apps? It’s a similar idea. We compare the predicted age to the age you optionally enter to see if you “lied” 😉. The gender detection isn’t binary; it provides a confidence for male/female – our UI might say something like “The AI is 95% sure you’re male.”
Emotion Recognition: Using face-api.js’s face expression model, the plugin can categorize your expression (happy, sad, angry, surprised, neutral, etc.). This feeds into the “Dominant Emotion” you see displayed. For example, smile and you’ll likely see “😀 Happiness” detected at a high percentage.
BMI & Life Expectancy (For Fun): This part is more heuristic than AI – since face-api.js doesn’t predict BMI or lifespan directly, we do a bit of creative estimation. The plugin takes the detected face shape and perhaps other cues (like roundness of face) to guess a BMI category (this is very approximate!). Then it uses your age and a global average lifespan table to suggest how many years you might have left. Important: These are tongue-in-cheek features not based on rigorous science – included for entertainment. (We clearly label it as such so users don’t take it seriously.)

All these analyses happen in real-time: as the camera feed comes in, the models process each frame (or an extracted image from it) right in the browser. There’s a loop running (often using requestAnimationFrame or timed intervals) that continuously updates the results on screen. If you move or change your expression, the stats update on the fly. It feels almost like a magic mirror giving you feedback about your face!

On-Device ML = Privacy & Speed

A huge benefit of using face-api.js in WordPress is that everything runs on the client-side. The AI models (which are just static files of neural network weights) get loaded to the user’s browser, and TensorFlow.js runs the computations using WebGL or CPU. This means:

No Server Calls: The plugin does not send images or video to any server for processing. There’s no third-party API or cloud service involved. Your users’ camera data stays local. This is essential for privacy – and it also means no expensive API costs for you as the site owner.
Speed & Offline Capability: Because processing is local, results come back in milliseconds once models are loaded – no network latency. And if someone has the page cached, it could even work offline. The initial model load might take a few seconds (depending on internet speed) because we have to fetch the model files (which are a few MB total), but after that it’s smooth sailing. We display a “Loading AI models…” progress (you might have noticed it when you tested the plugin) to keep users informed during that short wait.
Browser Requirements: This approach leverages modern web tech. We recommend users be on a modern browser that supports WebRTC (for camera) and WebGL (for fast TensorFlow). Chrome, Firefox, Safari, Edge – all recent versions work. One quirk: on iOS devices, Safari is required (thanks to Apple’s policies, other browsers can’t access the camera). We’ve built in a notice for iPhone/iPad users to use Safari. Other than that, if a user has any device with a camera from the last ~5-7 years, they should be able to run the test fine.

WordPress Integration

How does all this AI stuff plug into WordPress so seamlessly? The plugin’s code is actually quite straightforward. We use a shortcode and enqueue some scripts – WordPress handles the rest. Here’s a simplified peek at the integration code (for fellow developers out there):

// Register the [how_normal_am_i] shortcode to output the AI face test interface
function hownormalami_render_shortcode() {
    // Output container HTML for video and results
    $html = '<div id="hnai-container">
        <video id="hnai-video" autoplay playsinline></video>
        <canvas id="hnai-overlay"></canvas>
        <div id="hnai-results"></div>
    </div>';
    return $html;
}
add_shortcode('how_normal_am_i', 'hownormalami_render_shortcode');

// Enqueue the necessary JS and CSS for the front-end when the shortcode is used
function hownormalami_enqueue_assets() {
    // Face API library (from CDN or plugin file)
    wp_enqueue_script( 
        'face-api', 
        'https://cdn.jsdelivr.net/npm/face-api.js', 
        array(), 
        null, 
        true 
    );
    // Our plugin's main JS (depends on face-api.js)
    wp_enqueue_script( 
        'how-normal-am-i-js', 
        plugin_dir_url(__FILE__) . 'assets/js/how-normal-am-i.js', 
        array('face-api'), 
        '1.0.0', 
        true 
    );
    // Plugin CSS for styling the interface
    wp_enqueue_style( 
        'how-normal-am-i-css', 
        plugin_dir_url(__FILE__) . 'assets/css/how-normal-am-i.css', 
        array(), 
        '1.0.0' 
    );
}
add_action('wp_enqueue_scripts', 'hownormalami_enqueue_assets');

As you can see, we register a shortcode that outputs a container with a <video> (for the webcam feed), a <canvas> overlay (for drawing things like face landmark points or the “face print” visualization), and a results <div> (where we inject text like the scores). Then we enqueue the face-api.js library and our custom JS, plus some CSS for styling. The custom JS (how-normal-am-i.js) is where the face-api is initialized, models are loaded, and the analysis loop runs to populate the results. This separation keeps the heavy code out of PHP – we let JavaScript handle it in the browser.

(If you’re interested in the nitty-gritty, check out the source on GitHub – it’s all there, including the model files and how we calculate the metrics.) By leveraging WordPress’s shortcode and enqueue system, we made adding complex AI functionality as simple as adding a snippet to content. Pretty neat, right?

Now that we know how it works and how to use it, let’s talk about making the most of it: ensuring it doesn’t hamper your site’s SEO or performance.

SEO & Performance Best Practices

Adding an interactive tool like the How Normal Am I? AI face test to your site is awesome for engagement – but what about SEO and site performance? Here are some best practices to keep in mind, so you get the benefits without drawbacks:

Provide Contextual Content: Search engines can’t “see” what the AI face test outputs (since it’s interactive and mostly canvas/video). To make the page SEO-friendly, include descriptive text on the page around the shortcode. For example, introduce the tool with a paragraph (e.g., “Try our AI face analyzer to see your beauty score, age guess, and more, live via your webcam.”). This ensures the page has indexable content with relevant keywords (like AI face test, AI beauty analyzer) for Google to chew on. It also helps users understand the tool’s purpose before they engage.
Use a Clear Heading Structure: Structure the page with headings for the tool and any info. For instance, an H1 for the page title (“AI Face Test – How Normal Am I?”) and maybe an H2 for a brief explanation or results section. This not only improves readability but also signals the page’s topic to search engines. (If you’re embedding the tool within a larger article, as we do here, the same advice applies – keep the content well-organized.)
Optimize Meta Tags: Since this is a cool feature, you’ll want it to look good when shared on social media. Set a meta description that invites clicks (e.g., “Ever wondered how an AI rates your face? Try our live AI face test on this page – no data uploads, just instant fun insights!”). Also, add Open Graph tags and Twitter Card tags for the page: use a catchy title, a relevant description, and an eye-catching image (perhaps a screenshot of the plugin in action or a graphic with “AI Face Test”). This way, when someone shares the link, it will generate an attractive preview. (For example, an OG title like “How Normal Am I? – AI Face Test for WordPress” and a descriptive OG image can boost click-throughs.) Make sure to include a self-referencing canonical URL for the page as well, to avoid any duplicate content issues.
Alt Text for Images: If you include any images or screenshots on the page (for instance, an illustration of the AI results or a sample face print graphic), be sure to add alt text. Alt text not only helps visually impaired users with screen readers, but also provides additional context to search engines. In this article, we’ve indicated alt text suggestions for our image placeholders (e.g., describing what the demo screenshot shows). You should do the same on your site: e.g., <img src="demo-results.png" alt="Screenshot of AI face test results showing beauty score and age prediction">.
FAQ Schema for Q&A: We highly recommend adding a small FAQ section (like we do below) if your page lends itself to common questions. This can boost your SEO via rich snippets. By formatting frequent questions and answers in a structured way, you enable search engines to identify them and potentially display them in search results. You can use a plugin like Yoast SEO’s FAQ block which automatically adds the proper schema. (See Google’s Structured Data documentation for more on FAQ schema.) Not only does this help SEO, it also directly answers user curiosities on the page, improving the user experience.
Performance Considerations: While the plugin is optimized, loading AI models does carry some overhead (a few MB of data and using the user’s device CPU/GPU for computation). Here’s how to ensure that doesn’t become a problem:
- Load on Specific Pages: Only use the shortcode on pages where you want the face test. The plugin only enqueues its scripts when the shortcode is present, so avoid placing it site-wide (e.g., not in the header or footer of every page) unless necessary. Keeping it to a dedicated page (like “AI Test Center”) is a smart move.
- Leverage Caching: Once the models are downloaded, the browser will cache them. Encourage users to revisit or try multiple times – subsequent loads will be faster. As the site owner, you don’t need to do much; just know that the second time a user uses the tool it’s usually snappier.
- Optimize Images & Video Size: The plugin’s video feed is the user’s camera, so there’s no image to optimize from your end. But any static assets (like background images on your page, or the plugin’s own icons) should be optimized/compressed as usual to keep your page fast. The plugin’s CSS/JS are already minified for performance.
- Test Mobile Performance: Try the page on a mobile device. The AI face test should still work (with a slight performance drop on older phones). Make sure the layout (the video and results) is mobile-friendly on your chosen theme. Our plugin outputs responsive elements, but your theme’s container width and such will play a role. If needed, you can add some custom CSS to adjust the appearance on smaller screens.
General WordPress SEO Tips: Don’t forget the fundamentals. Ensure your site’s SEO plugin (Yoast, RankMath, etc.) has the page’s SEO title and description set. Use a concise URL slug (for example, .../ai-face-test is better than a long query string). For more tips on optimizing WordPress pages, check out this WordPress SEO guide by Yoast – it’s a goldmine of best practices.

By following these tips, you’ll ensure that adding this cool AI feature doesn’t unintentionally hurt your site’s search visibility or speed. In fact, when done right, it can enhance SEO (through fresh content and engagement signals) and make your site stand out. Now, let’s address some of the burning questions you might have (we’ve heard a few from testers!).

Frequently Asked Questions (FAQ)

Q: Is the “How Normal Am I?” plugin really free?
A: Yes! This plugin is completely free and open-source. You can download it from GitHub without paying a cent. It’s released under the GPL v2.0 license, which means you’re free to use it, modify it, and share it. We created this as a community project to spread some fun and knowledge about AI – so enjoy! (If you’d like to support the project, giving us a ⭐ on GitHub or sharing the plugin with others is super appreciated.)

Q: Does this plugin store or send any personal data?
A: No personal data is stored by the plugin. All face analysis is done in the browser on the user’s device. No images, videos, or analysis results are sent to our server. The only thing that might be sent (and only if the user explicitly agrees) is an anonymous summary of their results to help recalibrate the “average” in our AI model. But even that data has no identifying info and is completely optional. By default, nothing leaves the user’s browser. We built this to be privacy-first. (Our [Privacy Policy] page covers this in more detail.)

Q: How accurate is the AI face test?
A: It’s as accurate as a fun demo can be – which is to say, take it with a grain of salt. Some aspects, like face detection, are very accurate (it can find faces reliably), and things like age and emotion detection are decent guesses. The beauty score and “normality” score are more for entertainment; beauty is subjective, and our AI is basing it on symmetry and a limited dataset. The life expectancy stat is a playful extrapolation. So while the plugin gives plausible results and is built on real AI models, it’s not a scientific or definitive assessment of you. Think of it as a goofy mirror, not a diagnostic tool.

Q: What are the requirements to use this plugin?
A: For the plugin to work, your site needs to be running WordPress 5.0+ (pretty standard) and your users need a modern web browser with camera support. That includes most up-to-date browsers on desktop and Android. On iOS, as mentioned, users should open your page in Safari due to Apple’s restrictions on camera access. There’s no need for any special hardware beyond a webcam. Also, ensure your site is served over HTTPS, because most browsers block webcam access on insecure (HTTP) pages for security. So, if your site is not HTTPS yet, you’ll want to fix that before using any webcam feature.

Q: Can I customize the look or behavior of the face test?
A: Yes, to some extent. You can use CSS to style the output (the plugin’s HTML markup is simple with identifiable IDs/classes). For example, you could add custom CSS to change the font of the results or the border of the video element. As for behavior, the plugin doesn’t (currently) have a ton of admin settings, but it does let you toggle which metrics to show. If you’re a developer, since it’s open-source, you could modify the plugin code to change text labels (“Beauty” to “Attractiveness”, etc.), or even extend the functionality. Just remember that if you modify the core plugin code directly, you’ll need to reapply those changes when updating. An alternative is to fork it on GitHub and maintain your own version with your changes.

Q: Will using this slow down my site?
A: Generally, no — the impact is minimal and only on the page(s) where you use it. The plugin’s scripts load asynchronously and won’t block your page from rendering. The main cost is the model files (a few MB) which load when someone visits the face test page. It might make that specific page take a couple seconds longer on first load (while models download), but it shouldn’t affect your overall site speed or other pages. Also, the computation for the AI happens in the user’s browser, so your server isn’t burdened by heavy processing. Just be mindful not to overload a page with tons of other heavy content alongside the face test. We recommend keeping the face test on a page by itself or with light content, which it sounds like you’re doing.

Q: Where can I see a live demo or example of this?
A: Check out our website frontpage (the place hosting the original How Normal Am I?). That will give you a feel for the end-user experience. It’s essentially the same UI and functionality that you’re embedding via this plugin. You can try it there and then confidently add it to your site, knowing what your users will see. Additionally, the screenshots/GIFs in this article provide a glimpse of the plugin in action.

Q: How do I get support or report issues?
A: The best place for support or to report a bug is the GitHub repository’s issues section. Since this is an open-source project, you can create a GitHub issue describing the problem or question. We (the developers) will do our best to help. You might also find that the WordPress community at large could be interested – feel free to post on relevant forums or even Reddit (the concept “How Normal Am I” gained some popularity there). And if you have development skills, you can directly contribute a fix or feature via a pull request. 🎉

Q: Do you plan to add more features?
A: We have a few ideas in mind! Some possibilities: adding multi-face support (for group photos), allowing users to upload a photo instead of using a webcam (for those who are camera shy or on devices without a camera), or adding more nuanced analysis (like detecting face shape, or “which celebrity do I most resemble?” – just kidding… maybe 😜). We’re also open to community suggestions. The beauty of open source is that if there’s a feature the community wants and can help build, it can become a reality. So drop us your suggestions (or code) on GitHub.

Hopefully these FAQs clear up most questions. If you’re still wondering about something, don’t hesitate to reach out through our contact or the GitHub page.

Conclusion

The One-click WordPress AI Face Test plugin (aka the How Normal Am I? WP plugin) is an exciting blend of web technology and AI – bringing a viral “AI face rating” experience straight into the hands of WordPress site owners. Whether you run a blog, a personal website, or even an online community, this plugin can add a spark of interactive fun that keeps visitors engaged. Plus, it showcases the possibilities of privacy-friendly, on-device AI. No need for costly APIs or worrying about data leaks – it’s all under your control.

We built this tool to be technical yet accessible: if you’re non-technical, you can use it out-of-the-box with a simple shortcode. If you’re a developer, you can appreciate the elegance of face-api.js and even extend the plugin further. In either case, we hope it brings value to you and your audience.

So, what are you waiting for? Give it a try on your site! You can find the code and installation instructions on our GitHub page. If you love it, consider giving the repository a star and sharing your site’s implementation with us – we’d be thrilled to see it in the wild. And if you have ideas or improvements, jump into the project; it’s a collaborative effort.

At the end of the day, “How Normal Am I?” is just a fun experiment turned WordPress plugin, but it hints at a future where AI can be embedded in websites easily and responsibly. We’re proud to take a step in that direction with this release.