Machine Learning Maverick – My Path of Learning

Moving forward in my journey into the AI/ML world, I thought, “Let’s create an AI Chat for my blog content.” It sounds easy, but it wasn’t. I learned many lessons and gained new skills. The problems started when I wanted to put my app code on production.

The idea

The main idea was to create a web app with AI Chat and simple prompt input and output messages. I wanted to host it on my own server so I could have full control over it.

How it looks

Steps

Online video course

I’ve started gaining knowledge. I found a course called LangChain Mastery: Build GenAI Apps with LangChain & Pinecone. It was a very good choice. The course is “10.5 hours on-demand video,” which took me 33 days to finish.

Blog plugin & the data

Because I wanted to use my blog, which is based on WordPress, it was natural for me to create a PHP plugin for WordPress. I don’t know how to write code in PHP. The web app should be hosted on another remote server (other than my WordPress) and embedded into a WordPress blog page. Data for the AI Chat will be exported to a CSV file and processed in the web app to be used for an OpenAI.

Big Bang! My own server

I wanted my own server to host my web app. Why my own server? Three main reasons:

1. Privacy.
2. Full control.
3. No fees.

Now with this created server, I’m able to host my other apps. This will be my playground, in the feature I will add:

• Docker (podman),
• CI (Continuous Integration) and CD (Continuous Delivery/Deployment).

NOTE: Yes, I know when I use OpenAI API I’m sending all my data to them. The next step is to use my own local LLM as a base for my AI Chat app.

What I’ve learned

1. AI/ML tools
   • LangChain
   • OpenAI API
   • Vector Database
   • Embeddings
   • Streamlit
2. Linux server administration
   • iptables
   • httpd
   • ssh keys
3. Computer networks
   • Reverse Proxy
   • Domain
   • SSL
4. Python
   • Packaging with pyproject.toml
   • .env with with dotenv

All of the above topics require separate blog posts. As I wrote to my friend after finishing the server setup: “No training would give as much as “torment” over a practical example.”

The server setup required the following components:

• Buying a VPS server,
• Buying a domain,
• Buying an SSL certificate for the domain,
• Configuration of the VPS server to use the domain and the SSL certificate.

The server administration required:

• “Firewall” configuration using iptables,
• “Web server” configuration using httpd, mainly the Reverse Proxy,
• SSH and SSL “keys” setup for secure connection to the server.

Side effect – Prompt Engineering – a perfect recipe

While working with the LangChain I’ve learned how “Prompt Engineering” works! Long story short, what is in the LangChain are the basics of creating good prompts for any AI tools currently available. Knowing the main concepts introduced in the LangChain is crucial.

Key concepts in the LangChain:

1. Components.
2. Chains.
3. Agents.

Let’s focus on the Components to figure out how to write a perfect prompt. The components consist of the following parts:

1. LLM Wrappers.
2. Prompt Templates.
3. Indexes.
4. Memory.

The Prompt Templates are the most important parts of a perfect prompt. For prompt templates, we are using the below elements/roles:

1. System (SystemMessage):
   • Sets the behavior of the system,
   • Defines the LLM’s behavior, tone, or personality (e.g., formal, casual, helpful).
   • Specifies constraints or domain-specific knowledge (e.g., “You are an expert in legal advice”).
   • Instructs the model to take on a specific role or adopt a perspective.
2. User (HumanMessage):
   • Sets the prompt/question for the assistant,
   • Provides the query or instructions that the LLM should respond to.
   • Drives the direction of the interaction by asking questions, requesting explanations, or supplying data.
   • Mimics the role of the end-user or participant interacting with the model.
3. Assistant (AIMessage):
   • Stores previous responses returned for a User by the Assistant,
   • Communicates the output based on the instructions in the SystemMessage and the query in the HumanMessage.
   • Delivers results, explanations, or other forms of output that align with the defined role and context.
   • Simulates the role of the AI assistant or participant responding to the user.

If you know about these three main components/messages (System, User, and Assistant) you can write a perfect prompt!

The LangChain is a topic for another post.

Code examples

Fragment of WordPress Plugin for embedding the external ChatAI web app – PHP.

<?php
function chat_ai_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'src' => 'http://localhost:8080/',
            'width' => '100%',
            'height' => '600',
        ),
        $atts,
        'chat_ai'
    );
    
    return '<iframe src="' . esc_url($atts['src']) . '" width="' . esc_attr($atts['width']) . '" height="' . esc_attr($atts['height']) . '" style="border: none;"></iframe>';
}
add_shortcode('chat_ai', 'chat_ai_shortcode');
?>

Fragment of Web App – frontend part – Python.

startup_status = self.startup_task()
self.cc_chain = startup_status["cc_chain"]

st.title("Question and Answer Chat")
st.write("Question and Answer Chat for the Blog content - powered by AI")

with st.form("qanda_form"):
    question = st.text_input("Write question:")
    clicked = st.form_submit_button("Ask question")

try:
    if clicked:
        llm_answer = cc.ask_question(question, self.cc_chain)
        answer = st.text_area("Answer:", value=llm_answer)

Fragment of Web App – backend part – Python.

def prepare_vector_store(file_name=""):
    print(f"prepare_vector_store({file_name})")
    app_resources = os.environ["APP_WEB_RES"]
    posts_csv_file = os.environ["BLOG_POSTS"]

    resource_path = pkg_resources.files(app_resources).joinpath(posts_csv_file)
    loaded_posts = pl.load_file(resource_path)
    chunks = ald.chunk_data(loaded_posts)
    vector_store = ald.create_embeddings(chunks)
    print("Vector store prepared")
    return vector_store

Source code – GitHub

All the source codes can be found on my GitHub – https://github.com/machinelearning-maverick/jjd-chat-ai

Live App on Blog

The working app can be found on my Blog – https://www.juniorjavadeveloper.pl/jjd-chat-ai/

Conclusion

It may look like a super easy task and a lot of fun but it wasn’t like that.

NOTE: In this article, I’m just barely scratching the surface. This topic needs more reading and research on your own. I’m still at the beginning of my learning process of AI & ML!