About Me – AI powered chat avatar.

My philosophy is that you can’t truly protect something unless you understand how it works. Artificial Intelligence is a powerful and fascinating tool that can be applied in cybersecurity in many – and likely still undiscovered – ways. Of course, AI can also be used beyond infosec, including in the physical world through robotics.

However, like any IT tool, AI and any software which uses it, needs to be protected. In my view, you can’t secure it unless you understand how it works. To address this, I decided to learn AI more deeply. Recently, I completed 100 Days of Code: The Complete Python Pro Bootcamp by Dr. Angela Yu. It was a long but fantastic course that gave me a solid foundation in Python – the most popular programming language for Artificial Intelligence.

Currently, I’m studying The Complete Agentic AI Engineering Course (2025) by Ed Donner, and I highly recommend it.

One of the projects from this course is an AI chat avatar that acts as a version of yourself. You provide it with data, and it responds to questions as if it were you. I’ve adapted the code to meet my personal needs, and you can find the project on my GitHub:
🔗 https://github.com/InfosecOTB/vMe
You can also see it in action on my blog’s homepage:
🔗 https://infosecotb.com

This isn’t a cybersecurity project per se, but I found it interesting and fun enough to write an article about. I won’t go into all the details (they’re on GitHub), but here are a few highlights:

1. The chatbot acts as a version of you, answering questions about your professional background or personal life – depending on the data you provide. It connects to the OpenAI API, so a subscription and API key are required.
2. You can feed the AI information by adding .pdf or .txt documents to the about_me folder and naming them according to their content. Examples: personal_information.pdf, exported_linkedin.pdf.
3. If the user starts a chat or shares their email, the information is sent using the SMTP2GO service, which requires an API key. This service is free for a limited number of emails.
4. The code can be hosted on Hugging Face, which offers a free tier. Instructions are available in the GitHub repo.

One thing you won’t find in the GitHub repository – but I think it’s worth mentioning – is that the Hugging Face chat can be embedded into a website using an iframe. Below is the HTML code you can use to do this.

The script automatically detects if the visitor is using a desktop or mobile device and displays the appropriate chat interface. On desktops, the chat appears as a popup with a minimize button. On mobile and tablets, it displays inline for better usability.

Simply copy and paste this code into your website’s HTML where you’d like the chat to appear:

Have fun, and as usually, if you have any question and comment, please contact me.

<script>
  function isMobileOrTablet() {
    return /Mobi|Android|iPhone|iPad|iPod|Tablet/i.test(navigator.userAgent);
  }
</script>

<!-- Desktop Chat -->
<div id="chat-desktop" style="display: none;">
  <!-- Minimized Chat Button -->
  <div id="chat-button" style="
    position: fixed;
    bottom: 80px;
    right: 8px;
    z-index: 9999;
    display: none;
  ">
    <button onclick="toggleChat(true)" style="
      padding: 14px;
      border-radius: 50%;
      background: #0073aa;
      color: white;
      border: none;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    ">
      💬
    </button>
  </div>

  <!-- Chat Popup -->
  <div id="chat-popup" style="
    display: block;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 500px;
    height: 600px;
    z-index: 9998;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    border-radius: 8px;
    overflow: hidden;
    background: white;
  ">
    <!-- Minimize Button -->
    <div style="
      position: absolute;
      top: 5px;
      right: 15px;
      z-index: 10000;
    ">
      <button onclick="toggleChat(false)" style="
        background: #0073aa;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 14px;
        cursor: pointer;
      ">
        &minus;
      </button>
    </div>

    <iframe
      src="https://piotrkowalczyk-vpiotr.hf.space"
      width="100%"
      height="100%"
      style="border: none; border-radius: 8px;"
      allow="clipboard-write; clipboard-read"
    ></iframe>
  </div>
</div>

<!-- Mobile/Tablet Inline Chat -->
<div id="chat-mobile" style="display: none; text-align: center; margin-top: 20px;">
  <iframe
    src="https://piotrkowalczyk-vpiotr.hf.space"
    frameborder="0"
    width="100%"
    height="600"
    style="max-width: 100%; border-radius: 8px;"
    allow="clipboard-write; clipboard-read"
  ></iframe>
</div>

<script>
  // Show appropriate chat version
  window.addEventListener("DOMContentLoaded", function () {
    if (isMobileOrTablet()) {
      document.getElementById("chat-mobile").style.display = "block";
    } else {
      document.getElementById("chat-desktop").style.display = "block";
    }
  });

  // Toggle popup and minimize
  function toggleChat(showPopup) {
    const popup = document.getElementById("chat-popup");
    const button = document.getElementById("chat-button");

    if (showPopup) {
      popup.style.display = "block";
      button.style.display = "none";
    } else {
      popup.style.display = "none";
      button.style.display = "block";
    }
  }
</script>